0
239
ViewsCambiar el estado de uso del niño desde los ganchos de reacción del componente principal
Tengo un componente secundario llamado Window y tengo este useState en el componente Window:
Window Component: const [showWindow, setShowWindow] = useState(false);Imagina que este es el componente principal.
Parent component : ///// //// //// <Window/> <Button/ onClick={()=>{ setShowWindow(true) }}> ///// /////Como se puede ver, tengo un componente Botón aquí y quiero configurar showWindow en 'verdadero' a través de él.
¿Cómo puedo cambiar el useState en el componente secundario de su componente principal como este ejemplo? ¿Cómo puedo acceder a él?
2 answers
Answer question0
Si entiendo la pregunta correctamente, le gustaría tener el padre, capaz de cambiar el estado que se define en el niño.
No creo que esto sea posible exactamente como se describe. Una mejor solución podría ser definir el estado dentro del padre y luego pasar el estado al hijo.
Parent component : const [showWindow, setShowWindow] = useState(false); <Window showWindow = {showWindow} setShowWindow = {setShowWindow}/> <Button/ onClick={()=>{ setShowWindow(true) }}>eso debería producir la funcionalidad que creo que buscas. Además, también puede pasar el setter si necesita cambiar la ventana dentro del componente de la ventana (lo que probablemente haga si se trata de un componente de tipo emergente)
Como sugirió otra respuesta, otra solución sería usar el estado/contexto global. Esto le permitiría evitar pasar el estado, pero tiene más gastos generales
0
Para invocar funciones en un componente secundario, use el useImperativeHandle en el componente Window y envíe una referencia del componente principal al componente secundario para invocar de manera imperativa una función para actualizar el estado en el componente secundario.
Ejemplo:
Ventana
import { forwardRef, useImperativeHandle, useState } from 'react'; const Window = forwardRef((props, ref) => { const [showWindow, setShowWindow] = useState(false); useImperativeHandle(ref, () => ({ showWindow: () => setShowWindow(true), })); ... });Padre
import { useRef } from 'react'; ... const windowRef = useRef(); ... <Window ref={windowRef} /> <Button onClick={() => windowRef.current.showWindow()}> Show Window </Button> 