如何在reactjs中轻松地将数据从child传递到root？

Question

我有一个这样的评论框：

我已将所有操作绑定到 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();
        }
    },

    ... ...

})

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

Answer 1

您还可以对 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 文档中。

Answer 2

您还可以尝试管理全局应用程序状态，该状态可供所有组件使用，并通过 props 传递。

每次更改应用程序状态时，您都可以重新渲染整个内容。当您从顶级组件重新渲染时，您可以尝试使用以下方法进行优化 shouldComponentUpdate. 。我没有对此进行测试，但不知道它对于大型应用程序是否可以管理。

另外，看看如何 唵 正在优化 shouldComponentUpdate 通过使用不可变的数据结构。