如何在reactjs中轻松地将数据从child传递到root?
-
20-12-2019 - |
题
我有一个这样的评论框:
我已将所有操作绑定到 CommentBox 组件,有一个 decComment 操作要处理 Delete
每个评论中的事件。
每次当我点击 delete
按钮输入 Comment
我需要通过 commentId
的 Comment
到 CommentList
到 CommentBox
进而 CommentBox
更新评论数据,从评论数据中删除该评论并重新呈现评论列表。
这是一些代码:
var Comment = React.createClass({
handleDel: function() {
var cid = this.props.cid;
this.props.onDel(cid);
return false;
},
render: function() {
return (
<div key={this.props.cid}>
<a onClick={this.handleDel}>Del</a>
</div>
);
}
});
var CommentList = React.createClass({
handleDel: function(cid) {
this.props.onDel(cid);
},
render: function() {
var commentNodes = this.props.data.map(function(c) {
return <Comment cid={c.id} onDel={this.handleDel} />
}.bind(this));
return (
<div className="comments">
{commentNodes}
</div>
)
}
});
var CommentBox = React.createClass({
... ...
delComment: function (cid){
function del(data) {
$.ajax({
url: url,
type: 'delete',
dataType: 'json',
data: data,
success: function (e) {
if (e.retcode === 0) {
that.setState({
data: e.data
});
} else {
alert(e.error);
}
}
});
}
if (window.confirm('You Sure ?')) {
del();
}
},
... ...
})
这个过程太冗长了!有什么简单的方法可以做到这一点吗?
解决方案
您还可以对 a 处理程序进行部分应用,如下所示:
<Comment onDel={this.handleDel.bind(null, c.id)} />
什么时候 this.handleDel
叫做, c.id
将作为第一个参数传递。您还可以通过删除来缩短它 CommentList.handleDel
并只是做
<Comment onDel={this.props.onDel.bind(null, c.id)} />
有关此主题的更多信息,请参阅 组件之间的通信 在 React 文档中。
其他提示
您还可以尝试管理全局应用程序状态,该状态可供所有组件使用,并通过 props 传递。
每次更改应用程序状态时,您都可以重新渲染整个内容。当您从顶级组件重新渲染时,您可以尝试使用以下方法进行优化 shouldComponentUpdate
. 。我没有对此进行测试,但不知道它对于大型应用程序是否可以管理。
另外,看看如何 唵 正在优化 shouldComponentUpdate
通过使用不可变的数据结构。
不隶属于 StackOverflow