如何使用 react-router 将 this.state 和 this.props 传递给路由

Question

我不知道如何从我的 post 路由和组件中的父 ReactJS 组件访问方法。使用 react-router.

这是在 <RouteHandler {...this.state} />

method/function pushToPostList() 添加一个 post 对象到数组，保存在 this.state.myList 中。

试图让我的 <Post /> 组件正常工作，因此它调用 this.props.pushToPostList(newPost) 更新 <App />

中的 this.state.myList

路由器是：

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

更多代码：

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

将 pushToPostList={this.pushToPostList} 移动到应用 Class.

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

如何使用 react-router 将 this.state 和 this.props 传递给路由

How to pass both this.state and this.props to routes using react-router

reactjs

react-router