Estoy escribiendo un entorno de prueba de sandbox para un componente complejo ( Labeler ) en nuestra base de código. El componente complejo usa un gancho grande para administrar el estado en este momento ( LabelerHook ) y el gancho como funciones específicas que quiero poder usar para las pruebas de espacio aislado. Tengo una versión de trabajo, pero es muy torpe.

En este momento, tengo una página que es la caja de arena que pasa accesorios ficticios al componente Labeler . Esto funciona bien para instanciar el componente, pero no me permite interactuar con el gancho. Para hacer eso, estoy usando un window.ref para pasar el enlace.

 // somewhere inside labeler window.hook = labelerHook // somewhere that is parent of labeler let hook = window.hook

Sin embargo, esto no funciona bien porque noté que después de volver a renderizar el etiquetador, el gancho en el padre del etiquetador y el gancho en el etiquetador no están sincronizados. En este momento, tengo una función de "actualización" en la que tengo que hacer clic cada vez que se desincronizan.

Sé que debe haber una mejor manera de pasar estos datos, pero no quiero pasar accesorios adicionales a la etiquetadora porque eso podría causar muchos problemas y tampoco podemos mover LabelerHook.

He oído hablar de personas que usan el contexto, pero tampoco estoy seguro de cómo usarlo aquí para pasar un gancho hacia arriba.