Kommunikation zwischen Eltern und Kind-Komponente in React.js

Question

Nur ein Problem über die Kommunikation zwischen Eltern- und Kind-Komponente in Reagieren.

Kind

var Child = React.createClass({ 
    getInitialState() { 
     return { 
      childState: this.props.state, 
     }; 
    }, 
    changeState(e) { 
     this.setState({e.target.id}); 
    }, 
    render: function() { 
     return (
      <button id='1' onClick={this.changeState}>1</button> 
      <button id='2' onClick={this.changeState}>2</button> 
     ); 
    }, 
}); 

Eltern

var Parent = React.createClass({ 
    getInitialState() { 
     return { 
      parentState: '1', 
     }; 
    }, 
    render: function() { 
     return (
      <Child state=this.state.parentState /> 
     ); 
    }, 
}); 

So jetzt Eltern den Ausgangszustand passieren '1' auf das Kind, ich will das Kind-Komponente kann sowohl Kind ändern und Eltern Zustand. Wenn Sie zum Beispiel auf die zweite Schaltfläche klicken, werden sowohl der untergeordnete als auch der übergeordnete Status auf "2" gesetzt. Wie kann ich das erreichen? Danke Jungs!

Answer 1

Um dieses Verhalten zu erreichen, müssen Sie über Requisiten mit Ihrer übergeordneten Komponente kommunizieren.

var Child = React.createClass({ 
    render: function() { 
     return (
      <button id='1' onClick={this.props.changeState}>1</button> 
      <button id='2' onClick={this.props.changeState}>2</button> 
     ); 
    }, 
}); 

var Parent = React.createClass({ 
    getInitialState() { 
     return { 
      parentState: '1', 
     }; 
    }, 
    changeState: function(){ 
     this.setState({parentState: e.target.id}); 
    }, 
    render: function() { 
     return (
      <Child changeState={this.changeState} state={this.state.parentState} /> 
     ); 
    }, 
}); 

Die Idee dahinter ist, dass Sie übergeben die Funktion change von Ihrer Eltern-Komponente zu Ihrem Kind Komponente als Funktion nach unten und zugänglich durch Requisiten machen. Auf diese Weise, wenn Sie die Prop-Funktion in Ihrer untergeordneten Komponente aufrufen, wird die Funktion in der übergeordneten Komponente ausgeführt.

Auf diese Weise müssen Sie auch keinen zweiten "separaten" Status in Ihrer untergeordneten Komponente beibehalten, da der Status der übergeordneten Komponente in beiden verfügbar ist und in beiden denselben Wert hat.

Verzeihen Sie mir für Tippfehler - ich bin im Büro, aber da Sie noch keine Antwort hatten, wollte ich helfen.