كيفية تمرير البيانات بسهولة من الطفل إلى الجذر في رد الفعل?

Question

لدي مربع تعليق مثل هذا:

لقد ملزمة جميع الإجراءات لمكون التعليق ، هناك إجراء ديكومنت للتعامل معها 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

يمكنك أيضا القيام بتطبيق جزئي للمعالج ، مثل ذلك:

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

عندما this.handleDel يسمى, c.id سيتم تمريرها على أنها الحجة الأولى.يمكنك أيضا تقصيرها عن طريق إزالة CommentList.handleDel وفعل فقط

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

لمزيد من المعلومات حول هذا الموضوع ، انظر التواصل بين المكونات في مستندات رد الفعل.

Answer 2

يمكنك أيضا محاولة إدارة حالة تطبيق عالمية ستكون متاحة لجميع المكونات ، التي تم تمريرها بواسطة الدعائم.

على كل تغيير إلى حالة التطبيق ، يمكنك إعادة تقديم كل شيء.أثناء إعادة العرض من مكون المستوى الأعلى ، يمكنك محاولة التحسين باستخدام shouldComponentUpdate.لم أختبر ذلك ولا أعرف ما إذا كان يمكن التحكم فيه لتطبيق كبير.

أيضا ، نلقي نظرة على كيفية أم هو الأمثل shouldComponentUpdate باستخدام هياكل البيانات غير القابلة للتغيير.