我不知道如何从我的post路由和组件中的父ReactJS组件访问方法。使用react-router。
post
react-router
这是在 <RouteHandler {...this.state} />
<RouteHandler {...this.state} />
中的方法/函数pushToPostList()将发布对象添加到数组中,并保存在中this.state.myList。
pushToPostList()
this.state.myList
试图使我的<Post />组件正常工作,因此它调用this.props.pushToPostList(newPost)以更新this.state.myList<App />
<Post />
this.props.pushToPostList(newPost)
<App />
路由器是:
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> ); } });
将pushToPostList = {this.pushToPostList}移至App类。
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> ); } });