Reagire su come aggiornare lo stato di un altro componente?

Question

Sono abbastanza nuovo per reagire, cercando di far funzionare alcuni componenti. Ho

ObjectA:React.createClass({ 
     propTypes: { 
      ... 

     }, 

     getInitialState: function() { 
      return { 
       myState: null 
      } 
     }, 

     updateMyState: function(value) { 
      this.setState({ 
       myState: value 
      }) 
     } 

     render: function() { 
      return (<div className="my-class">'hello' +{this.state.myState}</div>); 
      } 
    }); 

    ObjectB:React.createClass({ 
      propTypes: { 
       ... 

      }, 

      render: function() { 
       return (<div className="my-class"><ObjectA/> 

      </div>); 
      } 
     }); 

Vorrei aggiornare lo stato di ObjectA da ObjectB. Come potrei in ObjectB chiamare il metodo updateMyState di ObjectA? Grazie!

Answer 1

L'idea di base di React è il flusso di dati unidirezionale. Ciò significa che i dati vengono condivisi solo verso il basso da un componente antenato ai suoi figli tramite le proprietà del figlio. Lasciamo Flux come architetture ed emettitori di eventi fuori dall'equazione per questo semplice esempio, in quanto non è affatto necessario.

L'unico modo per cambiare lo stato di un componente dall'esterno è cambiare i puntelli che riceve nel metodo di rendering del genitore. quindi myState vivrebbe effettivamente in ObjectB e sarà assegnato a ObjectA come proprietà. Nel tuo esempio, che sarebbe simile a questa:

ObjectA:React.createClass({ 
    propTypes: { 
     ... 

    }, 

    render: function() { 
     return (<div className="my-class">'hello' +{ this.props.name }</div>); 
     } 
}); 

ObjectB:React.createClass({ 
    propTypes: { 
     ... 

    }, 

    getInitialState: function() { 
     return { 
      name: null 
     } 
    }, 

    onNameChange: function(newName) { 
     this.setState({ name: newName }) 
    }, 

    render: function() { 
     return (
      <div className="my-class"> 
       <ObjectA name={ this.state.name } /> 
      </div> 
     ); 
    } 
});