Come passare facilmente i dati dal bambino a radice in reactjs?

Question

Ho una casella di commento come questa:

Ho legato tutte le azioni a CommentBox Component, vi è un'azione di decomment per gestire l'evento Delete in ogni commento.

Ogni volta che faccio clic sul pulsante delete in Comment sono necessario passare il commentId di Comment a CommentList a CommentBox e quindi CommentBox Aggiornamenti dei dati dei commenti, rimuove il commento dei dati dei commenti e rieduttura l'elenco dei commenti.

Ecco alcuni codici:

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

    ... ...

})

.

Questo processo troppo verboso!C'è un modo semplice per farlo?

Answer 1

Puoi anche fare un'applicazione parziale del gestore A, come:

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

.

Quando viene chiamato this.handleDel, c.id verrà passato come primo argomento.Puoi anche accorciarlo rimuovendo CommentList.handleDel e semplicemente facendo

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

.

Per un po 'più informazioni su questo argomento, vedere Comunicare tra i componenti nei documenti reagire.

Answer 2

Puoi anche provare a gestire uno stato di applicazione globale che sarà disponibile per tutti i componenti, passati da oggetti di scena.

Su ogni modifica allo stato di applicazione, è possibile ri-rendering il tutto. Come ripenditore dal componente di livello superiore potresti provare ad ottimizzare con shouldComponentUpdate.Non ho testato questo e non lo so se è gestibile per una grande applicazione.

Inoltre, dai un'occhiata a come om ottimizzando shouldComponentUpdate utilizzando strutture di dati immutabili.