Tengo un componente principal con un estado de uso que se muestra. Lo que quiero hacer es que un componente secundario pueda actualizar este estado para cambiar lo que muestra el elemento principal. Actualmente tengo lo siguiente:
function Parent() { const [myWindow, setMyWindow] = useState(null) useEffect(() => { setMyWindow(<Child updateWindowFunc={() => setMyWindow(someNewWindow)} />) }, []} return ( <div> {myWindow} </div> ) } function Child({updateWindowFunc}) { //Somehow calls updateWindowFunc }(Tenga en cuenta que mi código real está configurado de manera algo diferente, así que no se preocupe tanto por la sintaxis como por el concepto general).
Descubrí que puedo cambiar el valor de myWindow, pero la pantalla real no muestra ningún cambio. Intenté forzar una nueva representación después del cambio y agregar un useRef para mostrar useRef.current, pero nada parece actualizar qué ventana se está procesando.
¿Qué estoy haciendo mal?
Editar: descubrí que funciona si cambio a un tipo diferente de componente, pero si es solo un elemento diferente del mismo componente, entonces no hay una nueva representación. He estado usando React.createElement(), por lo que creo que los 'objetos' son distintos, pero tal vez no entiendo bien cómo funciona esto.
¿Puede proporcionar más detalles o un ejemplo de código que funcione o no funcione que tenga más información?
Actualmente es difícil de obtener, porque no tiene ningún sentido, ya que puede representarlo como se muestra a continuación y ese código tendrá el mismo resultado que el que está tratando de ejecutar.
function Parent() { return ( <div> <Child /> </div> ) }Entonces, para comprender mejor y solucionar un problema \ encontrar un enfoque diferente, proporcione más detalles