¿Cómo uso compartir algunos datos de estado en una función de componente React con otra? Ambos son hijos de otro componente más. (Soy un novato en React, así que quizás ingenuamente probé: 1) definí una const exportada desde mi ap.jsx con una estructura cuyas propiedades eran el estado. Parece que cuando se consultó, la estructura devolvía un valor nulo. 2) no puede usar accesorios ya que es una forma de padre a hijo).
Supongo que la mejor respuesta es: depende.
Sin embargo, la solución más simple sería mantener el valor en un componente principal y pasarlo a ambos componentes secundarios a través de accesorios.
Si desea omitir algunos niveles de anidamiento, puede buscar herramientas de administración de estado o contexto de React como redux, pero eso ya es una herramienta pesada. Es difícil decir qué es exactamente lo mejor en su caso con el contexto que ha compartido hasta ahora.
Si desea compartir el estado, puede usar el concepto de Context o Redux, que es una biblioteca para compartir bibliotecas.
Aquí hay un enlace útil para usted.
Estoy de acuerdo con akds en que el mejor enfoque depende de los detalles específicos de su escenario, pero que el enfoque recomendado sería que el padre administre el estado, a menos que la complejidad de su escenario indique lo contrario.
Aquí hay un ejemplo bastante trivial con una clase de componente como padre para administrar el estado en función de una acción realizada en uno de los componentes secundarios, con los dos componentes secundarios siendo componentes sin estado. La clave es que el padre pasa una función de devolución de llamada al hijo para cualquier evento en el hijo relacionado con el cambio de estado que debe manejarse. En este ejemplo, eso es solo un clic en uno de los componentes secundarios, pero podría ser cualquier cosa.
Aquí está el código del ejemplo de CodePen:
HTML:
<div id="example"></div>JS:
import * as React from "https://cdn.skypack.dev/react@17.0.1"; import * as ReactDOM from "https://cdn.skypack.dev/react-dom@17.0.1"; class Parent extends React.Component{ constructor(props){ super(props); this.state = {child1Selected:false}; } handleChild1Click(){ this.setState({child1Selected:!this.state.child1Selected}); } render(){ return ( <div> <Child1 child1Selected={this.state.child1Selected} onClick={() => {this.handleChild1Click();}} style={{width:"100px", height:"100px", backgroundColor:"blue"}} /> <Child2 child1Selected={this.state.child1Selected} style={{width:"100px", height:"100px", backgroundColor:"lightgrey"}} /> </div> ); } } function Child1(props){ return ( <div onClick={props.onClick} style={props.style}> {props.child1Selected ? "I am Selected" : "I am NOT Selected"} </div> ); } function Child2(props){ return ( <div style={props.style}> {props.child1Selected ? "My Sibling is Selected" : "My Sibling is NOT Selected"} </div> ); } let loadApp = ReactDOM.render(<Parent/>, document.getElementById('example')); loadApp;