La frase que me viene a la mente es Levantamiento de Estado . React tiene un flujo de datos 'de arriba hacia abajo'. Por lo tanto, su estado debe inicializarse en el componente principal y transmitirse a los componentes secundarios que lo necesitan. por ejemplo (pseudocódigo, puede que no funcione)

 function Parent() { const [text, setText] = useState('hello world') return ( <> <Child text={text} /> <OtherChild text={text} setText={setText} /> </> ) } function Child({ text }) { return <p>{text}</p> } function OtherChild({ text, setText }) { return ( <input onChange={e => setText(e.target.value)} value={text} /> ) }

Deberá pasar una función que actualice el estado del padre al componente hijo a través de accesorios:

En este ejemplo en particular, tanto el hijo como el padre tienen un enlace de estado que realiza un seguimiento del tiempo: se llama a la función updateParentTime del padre cada vez que cambia el valor de time del hijo.

NOTA : probablemente no sea necesario mantener el estado en ambos lugares... Solo estaba mostrando un ejemplo. Si el padre necesita tener un estado para el time , también puede pasarlo al componente secundario

 const Parent = (props) => { const [time, setTime] = useState(0); const updateParentTime = (t) => { setTime(t); } return ( <Child updateParentTime={updateParentTime}/> ) } const Child = (props) => { const {updateParentTime} = props; const [time, setTime] = useState(0); useEffect(() => { updateParentTime(time) }, [time]); return ( <div> {/* something goes here */} </div> ) }

Lo siguiente define dos componentes de React: Parent y Child .

Parent declara una parte del estado llamada time y un método mutator para ese estado llamado setTime .

El valor actual del time se pasa a Child a través de la propiedad denominada time .

setTime se pasa a Child a través de la propiedad llamada notify .

Child configura un temporizador que invoca la notify (es decir setTime ) una vez por segundo.

La invocación de la notify le dice a React que se ha producido un cambio de estado y desencadena una nueva representación de ambos componentes, lo que hace que cada componente represente la hora, una vez por segundo.

 pre { border: 1px solid black; padding: 10px; }

 <script src="https://unpkg.com/@babel/standalone@7/babel.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script> <script type="text/babel"> const { useState, useEffect } = React const Parent = () => { const [ time, setTime ] = React.useState('--- --- -- ----') return <pre> Parent: { time } <Child notify={setTime} time={ time }/> </pre> } const Child = ({ notify, time }) => { useEffect(()=>{ const id = setInterval(() => notify(Date()), 1000) return () => clearInterval(id) }) return <pre>Child: {time}</pre> } ReactDOM.render(<Parent/>, document.querySelector('main')) </script> <main></main>