如何在reactjs中轻松地将数据从子传递到根？
如何在reactjs中轻松地将数据从子传递到根？
提问于 2014-02-25 03:45:28
我有一个这样的评论框：
我已经将所有操作绑定到CommentBox组件，在每个注释中都有一个decComment操作来处理Delete事件。
每次单击Comment中的Comment按钮时，我都需要将commentId of Comment传递给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();
}
},
... ...
})这个过程太冗长了！有什么简单的方法吗？
回答 2
Stack Overflow用户
回答已采纳
发布于 2014-02-25 06:23:38
还可以对处理程序执行部分应用程序，如下所示：
<Comment onDel={this.handleDel.bind(null, c.id)} />当调用this.handleDel时，c.id将作为第一个参数传递。您还可以通过删除CommentList.handleDel并只执行以下操作来缩短
<Comment onDel={this.props.onDel.bind(null, c.id)} />有关此主题的更多信息，请参见React中的组件之间的通信。
Stack Overflow用户
发布于 2014-02-26 09:58:17
您还可以尝试管理将对所有组件可用的全局应用程序状态，并由道具传递。
在每次更改应用程序状态时，都可以重新呈现整个过程。当您从顶层组件重命名时，您可以尝试使用shouldComponentUpdate进行优化。但是，我没有测试它，也不知道大型应用程序是否可以管理它。
另外，看看Om是如何使用不变的数据结构优化shouldComponentUpdate的。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/22004136
复制相关文章
相似问题
腾讯云开发者
