ChildからReactJSのrootにデータを簡単に渡す方法は？

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

のように、Aハンドラの一部のアプリケーションを実行することもできます。

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

.

this.handleDelが呼び出されると、c.idが最初の引数として渡されます。CommentList.handleDelを削除して

だけを実行することで短縮することもできます。

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

.

このトピックの詳細については、コンポーネント間の通信を参照してください。/ a> React Docsの場合。

Answer 2

小道具によって渡されたすべてのコンポーネントで利用可能になるグローバルアプリケーションの状態を管理することもできます。

申請状態への変更ごとに、全部を再レンダリングすることができます。 最上位コンポーネントから再現すると、shouldComponentUpdateで最適化しようとすることがあります。私はそれをテストしていませんでしたが、大きなアプリケーションにとって管理できるかどうかわからない。

また、 OM <を見てください。/ a>は、不変のデータ構造を使用してshouldComponentUpdateを最適化しています。