Wie kann man in reactjs einfach Daten vom Kind zum Stamm übergeben?

Question

Ich habe ein Kommentarfeld wie dieses:

Ich habe alle Aktionen an die CommentBox-Komponente gebunden, es ist eine DECOMMENT-Aktion zu behandeln Delete ereignis in jedem Kommentar.

Jedes Mal, wenn ich auf das klicke delete knopf ein Comment Ich muss das bestehen commentId von Comment zu CommentList zu CommentBox und dann CommentBox aktualisiert Kommentardaten, entfernt diesen Kommentar aus Kommentardaten und rendert die Kommentarliste neu.

Hier ist ein Code:

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

    ... ...

})

Dieser Prozess zu ausführlich!Gibt es eine einfache Möglichkeit, dies zu tun?

Answer 1

Sie können auch eine teilweise Anwendung des a-Handlers wie folgt durchführen:

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

Wenn this.handleDel wird aufgerufen, c.id wird als erstes Argument übergeben.Sie können es auch kürzen, indem Sie es entfernen CommentList.handleDel und einfach tun

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

Weitere Informationen zu diesem Thema finden Sie unter Kommunikation zwischen Komponenten in den Reaktionsdokumenten.

Answer 2

Sie können auch versuchen, einen globalen Anwendungsstatus zu verwalten, der für alle Komponenten verfügbar ist, die von Requisiten übergeben werden.

Bei jeder Änderung des Anwendungsstatus können Sie das Ganze neu rendern.Beim erneuten Rendern von der Komponente der obersten Ebene können Sie versuchen, mit zu optimieren shouldComponentUpdate.Ich habe das nicht getestet und weiß nicht, ob es für eine große Anwendung handhabbar ist.

Schauen Sie sich auch an, wie Om optimiert shouldComponentUpdate durch Verwendung unveränderlicher Datenstrukturen.