Làm thế nào để vượt qua cả this.state và this.props để định tuyến bằng cách sử dụng phản ứng-router

Question

Tôi không thể tìm ra cách truy cập phương thức từ thành phần ReactJS gốc trong tuyến đường và thành phần post của mình. Sử dụng react-router.

Đây là trong <RouteHandler {...this.state} />

Phương pháp/chức năng pushToPostList() ở thêm một đối tượng đường bưu điện đến một mảng, tổ chức tại this.state.myList.

Đang cố gắng để có được thành phần <Post /> tôi làm việc vì vậy nó gọi this.props.pushToPostList(newPost) để cập nhật this.state.myList trong <App />

Router là:

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); 
}); 

Nhiều mã:

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

Move pushToPostList = {this.pushToPostList} vào Lớp ứng dụng.

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> 
    ); 
} 
});