Actualmente estoy accediendo al estado de un componente principal en un componente secundario mediante el uso de devoluciones de llamada, pero no estoy muy seguro de cómo funciona:
export default function parentComponent({ type }) { const [inEditMode, setInEditMode] = useState(false) return ( <> <div className={containerCssClasses}> <childComponent onCancel={() => { setInEditMode(false); }} type={type} />aquí, el componente principal está llamando al componente secundario y pasando una función anónima al componente para que devuelva la llamada.
En el componente hijo:
function childComponent({onCancel}) { return ( <div> <Button onClick={() => onCancel()} variant="link" > </div? ); }Estoy un poco confundido sobre cómo esto puede funcionar correctamente si el componente secundario no tiene acceso a setInEditMode(). Entiendo que al pasar una función a otra función (en este caso un componente), se pasa por referencia. Pero, ¿significa eso necesariamente que todas las variables dentro de esa función también se pasan por referencia? Soy nuevo en reaccionar (y javascript), pero cuando busqué este concepto no pude encontrar una buena explicación.
Su implementación es el camino correcto a seguir. Más que devoluciones de llamada, estas funciones que transmite a los componentes secundarios son accesorios de llamada y lo invito a leer la documentación sobre ellos.
https://reactjs.org/docs/components-and-props.html
También puedes encontrar artículos muy detallados al respecto:
https://itnext.io/what-is-props-and-how-to-use-it-in-react-da307f500da0
Cualquier cosa que pase del padre al hijo se puede usar en el componente hijo como si se llamara en el padre.
En su caso, el niño de hecho activará setInEditMode (falso)
Como no le está pasando ninguna variable, puede llamarlo así:
<Button onClick={onCancel} variant="link" >El estado del componente principal que pasa al componente secundario como accesorios no se actualiza a medida que cambia el estado principal. por lo tanto, necesita una función de devolución de llamada para acceder al estado actual de los padres en cualquier momento. Además, si tiene un valor de estado dependiente en el componente principal y secundario o en varios componentes, puede moverlo a reducer si está utilizando redux para la administración del estado.