Estoy buscando la solución más fácil para pasar datos de un componente secundario a su elemento principal.
Escuché sobre usar Context, pasar propiedades o actualizar accesorios, pero no sé cuál es la mejor solución.
Estoy creando una interfaz de administración, con un PageComponent que contiene un ChildComponent con una tabla donde puedo seleccionar varias líneas. Quiero enviar a mi componente de página principal el número de línea que he seleccionado en mi componente secundario.
Algo como eso :
Componente de página:
<div className="App"> <EnhancedTable /> <h2>count 0</h2> (count should be updated from child) </div>Componente hijo:
const EnhancedTable = () => { const [count, setCount] = useState(0); return ( <button onClick={() => setCount(count + 1)}> Click me {count} </button> ) };Estoy seguro de que es algo bastante simple de hacer, no quiero usar redux para eso.
Una técnica común para estas situaciones es elevar el estado hasta el primer ancestro común de todos los componentes que necesitan usar el estado (es decir, el PageComponent en este caso) y pasar el estado y las funciones que alteran el estado a los componentes secundarios como accesorios.
Ejemplo
const { useState } = React; function PageComponent() { const [count, setCount] = useState(0); const increment = () => { setCount(count + 1) } return ( <div className="App"> <ChildComponent onClick={increment} count={count} /> <h2>count {count}</h2> (count should be updated from child) </div> ); } const ChildComponent = ({ onClick, count }) => { return ( <button onClick={onClick}> Click me {count} </button> ) }; ReactDOM.render(<PageComponent />, document.getElementById("root")); <script src="https://unpkg.com/react@16/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <div id="root"></div>Puede crear un método en su componente principal, pasarlo al componente secundario y llamarlo desde accesorios cada vez que cambie el estado del elemento secundario, manteniendo el estado en el componente secundario.
const EnhancedTable = ({ parentCallback }) => { const [count, setCount] = useState(0); return ( <button onClick={() => { const newValue = count + 1; setCount(newValue); parentCallback(newValue); }}> Click me {count} </button> ) }; class PageComponent extends React.Component { callback = (count) => { // do something with value in parent component, like save to state } render() { return ( <div className="App"> <EnhancedTable parentCallback={this.callback} /> <h2>count 0</h2> (count should be updated from child) </div> ) } }Para simplificar mucho las cosas, puede compartir los establecedores de estado con los niños y ahora tienen acceso para establecer el estado de su padre.
ejemplo: suponga que hay 4 componentes como se muestra a continuación,
function App() { return ( <div className="App"> <GrandParent /> </div> ); } const GrandParent = () => { const [name, setName] = useState("i'm Grand Parent"); return ( <> <div>{name}</div> <Parent setName={setName} /> </> ); }; const Parent = params => { return ( <> <button onClick={() => params.setName("i'm from Parent")}> from Parent </button> <Child setName={params.setName} /> </> ); }; const Child = params => { return ( <> <button onClick={() => params.setName("i'm from Child")}> from Child </button> </> ); };por lo tanto, el componente abuelo tiene el estado real y, al compartir el método setter (setName) con el padre y el hijo, obtienen acceso para cambiar el estado del abuelo.
puede encontrar el código de trabajo en el sandbox a continuación, https://codesandbox.io/embed/async-fire-kl197