hola estoy aprendiendo y nuevo en reaccionar y quiero saber como pasar estado de un componente a otro,
tengo un componente como
const [paneCount, setPaneCount]= useState(1); const openPane = (paneKey) => { setOpeningPaneKeys(oldState => { if (!oldState.includes(paneKey)) { return [...oldState, paneKey] } return oldState }) setPaneCount(paneCount+1); console.log(paneCount); setFocusingPaneKey(paneKey) }donde quiero usar paneCount en el archivo App.js
function App(props) { const [inactive, setInactive] = useState(false); return ( <div className="App"> <Header /> <Navbar onCollapse={(inactive) => { setInactive(!inactive); }} /> <div class="landing-card"> <div> <h4 class="headingStyle">Recorder Box</h4> <h4>Count:{props.paneCount}</h4> <img src="landing.jpg" alt="Forest" width="775" height="500"></img> </div> </div>Cómo pasar paneCount a App.js
No puede pasar datos hacia arriba, solo hacia abajo. La razón de esto es cómo se construye la aplicación y el flujo de datos. Afortunadamente, hay 3 formas de hacerlo.
1) Inicializar en App.js
Si desea utilizar el valor de estado en App.js pero desea trabajar con él en otro lugar:
export default function App() { const [myState, setMyState] = useState(); return <Component state={ myState } setState={ setMyState } /> }De esta manera, puede mantener todo su estado en 1 lugar y usarlo en todas partes, pero también significa que debe pasar componente por componente para hacerlo.
2) Contexto
Esto mejora la opción anterior, porque ya no necesita pasar datos. En su lugar, puede mantenerlo en un proveedor y usarlo en toda su aplicación.
Hay varias formas de definir un proveedor, por lo que solo le vincularé los documentos para ese.
Nota: Las definiciones de proveedores no difieren de ninguna manera. ¡No son prácticos o imprácticos, simplemente la preferencia de uno sobre otro!
3) Redux
Podría decirse que esta es la MEJOR opción para la gestión estatal (aunque no me gusta...). Todavía no lo he usado y tampoco quiero, porque la opción anterior hace lo mismo con menos esfuerzo en mi opinión.
Aquí están los documentos para eso.
En lugar de pasar paneCount a App.js, que supongo que es el componente principal. Puede crear paneCount en App.js y luego pasar setPaneCount al componente openPane de esta manera.
<openPane setPaneCount = {setPanecount} paneCount = {setPaneCount}/>Si no está llamando a openPane en App.js por algún motivo, vaya al componente principal que está llamando tanto a App como a openPane y cree y pase setPaneCount y paneCount desde allí. Si está haciendo algo complejo en lugar de desglosar el valor de esta manera, es posible que desee ver algunas herramientas de administración de estado como Redux o Context API .