Tengo la intención de sacar la lógica de mi app.js. En este momento, en app.js, tengo una función que cambia el estado de algunas variables en App.js. Quiero saber cuál es la forma correcta de cambiar el estado dentro de app.js al permitir que app.js llame a una función (por ejemplo, al hacer clic) que está en otro componente.
mi app.js se parece a lo siguiente:
const App = () => { const [opacity, opacitySet] = React.useState(1); const [showStep, setDisplayStep] = React.useState(true); const [isQrActive, setQrState] = React.useState(false); /** code **/ <ButtonContinue onClick={() => { stateChanger(); }} style={{ backgroundColor: "black" }} > <p>cancel</p> </ButtonContinue> /** lots of code **/ function stateChanger() { opacitySet(0); setTimeout(() => { opacitySet(1); setDisplayStep(!showStep); setQrState(!isQrActive); }, 400); } /** and more code **/ }Quiero sacar la función stateChanger de app.js, pero mantener la misma funcionalidad. Esto, a su vez, me permitiría llamar fácilmente a stateChanger desde otras clases.
La solución más simple (que también es la más difícil de escalar) es pasar la función como accesorio a sus hijos. También puede crear un gancho personalizado. Pero al declarar el estado en la aplicación del componente de nivel raíz y preguntar cómo puede modificarlo en general desde otro componente, podemos interpretar que la pregunta es esencialmente sobre cómo manejar el estado global. Es posible que desee considerar el uso de Context API o Redux, que son herramientas creadas específicamente para ese propósito.
Lo más importante que debemos recordar aquí es que si tenemos la opción de mantener el estado razonablemente cerca de donde se usa y modifica, debemos hacerlo en lugar de manejarlo como parte de un estado global.