Javascript 如何在reactjs中轻松地将数据从子节点传递到根节点？

我有这样一个评论框：

我已将所有操作绑定到CommentBox组件，每个注释中都有一个decComment操作来处理

Delete

事件

每次单击

Comment

中的

delete

按钮时，我都需要将

Comment

的

commentId

传递到

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

    ... ...

})

var Comment=React.createClass({
handleDel:function（）{
var cid=this.props.cid；
这个.props.onDel（cid）；
返回false；
},
render:function（）{
返回(
德尔
);
}
});
var CommentList=React.createClass({
handleDel：功能（cid）{
这个.props.onDel（cid）；
},
render:function（）{
var commentNodes=this.props.data.map（函数（c）{
返回
}.约束（这个）；
返回(
{commentNodes}
)
}
});
var CommentBox=React.createClass({
... ...
delComment:函数（cid）{
函数del（数据）{
$.ajax({
url:url，
键入：“删除”，
数据类型：“json”，
数据：数据，
成功：职能（e）{
如果（e.retcode==0）{
那是一个州({
数据：e.data
});
}否则{
警报（即错误）；
}
}
});
}
if（window.confirm（'确定吗？'））{
del（）；
}
},
... ...
})

---

这个过程太冗长了！有什么简单的方法可以做到这一点吗？

您也可以部分应用处理程序，如下所示：

<Comment onDel={this.handleDel.bind(null, c.id)} />

---

有关此主题的更多信息，请参阅React文档中的。

您还可以尝试管理一个全局应用程序状态，该状态将由props传递给所有组件

每次更改应用程序状态时，都可以重新渲染整个过程。 从顶级组件重新加载时，您可以尝试使用

shouldComponentUpdate

进行优化。但我没有测试它，也不知道它是否适用于大型应用程序

---

而且，看看如何通过使用不可变的数据结构优化

shouldComponentUpdate

。

我们是否可以在顶级CommentBox组件上使用React附加一个单击处理程序，并监听来自Comment组件的任何单击，而不必将clickHandler从CommentBox一直传递到CommentList，然后再传递到CommentList评论。为什么这“太冗长”？在每个组件中，您可以将处理程序重命名为适合该组件的名称：在注释中，您正在处理“单击”，但在该组件之外，单击的概念是不相关的。在CommentList中，您正在查找带有“onDel”的“delete”。坚持这一点，看看你在一个月后回到代码时会有什么想法。我发现这种方法比在

document.body

上有一群侦听器更具描述性。

<Comment onDel={this.props.onDel.bind(null, c.id)} />