reactjs – 如何使用react-router将this.state和this.props传递
发布时间:2020-12-15 20:49:55 所属栏目:百科 来源:网络整理
导读:我无法弄清楚如何从我的后期路由和组件中的父ReactJS组件访问方法.使用react-router. 这是在 RouteHandler {... this.state} / 方法/函数pushToPostList()将post对象添加到数组中,保存在this.state.myList中. 试着让我的 Post /组件工作,所以它调用this.prop
我无法弄清楚如何从我的后期路由和组件中的父ReactJS组件访问方法.使用react-router.
这是在 方法/函数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> ); } });
将pushToPostList = {this.pushToPostList}移动到App 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> ); } }); (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |