Comment transmettre facilement des données de l'enfant à la racine dans Reactjs ?

Question

J'ai une boîte de commentaire comme celle-ci :

J'ai lié toutes les actions au composant CommentBox, il y a une action decComment à gérer Delete événement dans chaque commentaire.

Chaque fois que je clique sur le delete bouton dans Comment Je dois passer le commentId de Comment à CommentList à CommentBox et puis CommentBox met à jour les données de commentaires, supprime ce commentaire des données de commentaires et restitue la liste des commentaires.

Voici un peu de 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();
        }
    },

    ... ...

})

Ce processus est trop verbeux !Existe-t-il un moyen simple de procéder ?

Answer 1

Vous pouvez également faire une application partielle du gestionnaire a, comme ceci :

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

Quand this.handleDel est appelé, c.id sera passé comme premier argument.Vous pouvez également le raccourcir en supprimant CommentList.handleDel et je fais juste

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

Pour un peu plus d'informations sur ce sujet, voir Communiquer entre les composants dans la documentation React.

Answer 2

Vous pouvez également essayer de gérer un état global de l'application qui sera disponible pour tous les composants, transmis par les accessoires.

À chaque modification de l’état de l’application, vous pouvez restituer le tout.Lors du rendu à partir du composant de niveau supérieur, vous pouvez essayer d'optimiser avec shouldComponentUpdate.Je n'ai pas testé cela et je ne sais pas si c'est gérable pour une grande application.

Jetez également un œil à la façon dont Ôm optimise shouldComponentUpdate en utilisant des structures de données immuables.