gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-03 13:24:44 24 4
gpt4 key购买 nike

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

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

方法/函数pushToPostList() in 将 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}移至应用程序类。

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

关于reactjs - 如何使用react-router将this.state和this.props传递给路由,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29442206/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com