Entsendestaat Mutter Komponenten mit React.js

Question

Ich habe eine React.js App, die wie die aufgebaut ist folgende:

// App component - represents the whole app 
App = React.createClass({ 
    render() { 
     return (

      <div> 
      <Landing /> 
      <Description /> 
      <Skills/> 
      </div> 

    ); 
    } 
}); 

wo „Landing“, „Beschreibung“ und „Skills“ sind alle Kinder von Komponenten die App-Komponente.

In Landung habe ich eine untergeordnete Komponente Social Menü aufgerufen, die unter Verwendung von aufgerufen wird:

<SocialMenu items={ ['Home', 'Services', 'About', 'Contact us']} /> 

Es sieht wie folgt aus:

SocialMenu = React.createClass({ 

    getInitialState: function(){ 
     return { focused: 0 }; 
    }, 

    componentDidMount: function() { 
     MichaelReactStore.addChangeListener(this.state.focused); 
    }, 

    clicked: function(index){ 

     // The click handler will update the state with 
     // the index of the focused menu entry 

     this.setState({focused: index}); 
    }, 

    render: function() { 

     // Here we will read the items property, which was passed 
     // as an attribute when the component was created 

     var self = this; 

     // The map method will loop over the array of menu entries, 
     // and will return a new array with <li> elements. 

     return (
      <div> 
       <ul className="testblocks">{ this.props.items.map(function(m, index){ 

        var style = ''; 

        if(self.state.focused == index){ 
         style = 'focused'; 
        } 

        // Notice the use of the bind() method. It makes the 
        // index available to the clicked function: 

        return <li key={index} className={style} onClick={self.clicked.bind(self, index)}>{m}</li>; 

       }) } 

       </ul> 



       <p>Selected: {this.props.items[this.state.focused]}</p> 

       <ItemDetails item={ this.props.items[this.state.focused] } /> 

      </div> 
     ); 

    } 
}); 

ItemDetails = React.createClass({ 

    render: function() { 

     return (
      <div>{this.props.item}</div> 
     ); 
    } 

}); 

Was ich möchte, ist „senden die tun "State-up" zur App-Komponente aus dem sozialen Menü. Dann möchte ich diese Daten als Prop zu der Skills-Komponente senden, wo es abhängig von diesem Zustand einige dynamische Daten zeigt.

Wie würde ich das tun? Vielen Dank!

(Ich weiß, das für eine größere App nicht nachhaltig ist, aber für diese Anwendung, ich brauche nur eine einfache Lösung)

Answer 1

ich den Zustand in der Root-Komponente verwalten würde und machen focused eine Eigenschaft (this.props.focused) in allen Komponenten brauchst du es. Wo Sie jetzt das tun setState Sie einen Rückruf nennen, etwa so:

this.props.onFocusChanged(index) 

Sie diesen Rückruf an die Landung als eine Eigenschaft geben, und in der Landing Sie geben es als eine Eigenschaft auf den SocialMenu. Ihre App würde wie folgt aussehen:

App = React.createClass({ 

    getInitialState: function(){ 
     return { focused: 0 }; 
    }, 

    clicked: (index) => { 
     this.setState({focused: index}); 
    }, 

    render() { 
     return (

      <div> 
      <Landing onFocusChanged={this.clicked} focused={this.state.focused} /> 
      <Description /> 
      <Skills focused={this.state.focused}/> 
      </div> 

    ); 
    } 
});