Wie man this.state und this.props an routes mit react-router übergibt

Question

Ich kann nicht herausfinden, wie man auf eine Methode von einer Eltern ReactJS Komponente innerhalb meiner post Route und Komponente zugreift. Verwenden react-router.

Dies ist in <RouteHandler {...this.state} />

Die Methode/Funktion pushToPostList() in einem Objekt zu einem Array Beitrag hinzufügt, gehalten in this.state.myList.

Versuch, meine <Post /> Komponente zum Laufen zu bringen es so nennt this.props.pushToPostList(newPost) this.state.myList in <App />

Router zu aktualisieren:

var routes = (
    <Route handler={App} > 
    <DefaultRoute handler={SignUp} /> 
    <Route name="feed" path="feed" handler={LatestFeed} /> 
    <Route name="post" path="post" handler={Post} pushToPostList={this.pushToPostList} /> 
    </Route> 
); 


Router.run(routes, function (Handler) { 
    React.render(<Handler />, document.body); 
}); 

Weitere Code:

var App = React.createClass({ 

    getInitialState: function() { 
     return { 
      myList: [] 
     }; 
    }, 

    pushToPostList: function (object) { 
     if (object) { 
      var myTempPosts = this.state.myPostList; 
      myTempPosts.push(object); 
      this.setState({myPostList: myTempPosts}); 
     } 
    }, 

    render: function() {   
     return (
      <div> 
       <RouteHandler {...this.state} /> 
      </div> 
     ); 
    } 
}); 


var Post = React.createClass({ 

    handleSubmit: function(e) { 
     e.preventDefault(); 

     var myPostTxt = this.refs.myPostTxt.getDOMNode().value.trim(); 
     this.props.pushToPostList(myPostTxt); // Send object to parent ReactJS component. 

    }, 

    render: function() { 
     return (
      <div> 
       Post. 

       <textarea 
        ref="myPostTxt" /> 

       <p /> 
       <button onClick={this.handleSubmit} type="submit">Post</button> 

      </div> 
     ); 
    } 
}); 

Answer 1

Verschieben pushToPostList = {this.pushToPostList} zur App-Klasse.

var App = React.createClass({ 

getInitialState: function() { 
    return { 
     myList: [] 
    }; 
}, 

pushToPostList: function (object) { 
    if (object) { 
     var myTempPosts = this.state.myPostList; 
     myTempPosts.push(object); 
     this.setState({myPostList: myTempPosts}); 
    } 
}, 

render: function() {   
    return (
     <div> 
      <RouteHandler {...this.state} pushToPostList={this.pushToPostList} /> 
     </div> 
    ); 
} 
});