Question

我有一个这样的评论框：

enter image description here

我已将所有操作绑定到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文档中的Communicate Between Components。

Answer 2

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

对应用程序状态的每次更改，您都可以重新呈现整个事物。当您从顶级组件中重新渲染时，您可以尝试使用shouldComponentUpdate进行优化。我没有对此进行测试，也不知道它是否适用于大型应用程序。

另外，通过使用不可变数据结构来了解Om如何优化shouldComponentUpdate。

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

2 个答案: