Como passar facilmente dados do filho para o root no reactjs?

Question

Eu tenho uma caixa de comentários como esta:

Vinculei todas as ações ao componente CommentBox, há uma ação decComment para lidar Delete evento em cada comentário.

Toda vez que clico no delete botão em Comment Eu preciso passar o commentId de Comment para CommentList para CommentBox e então CommentBox atualiza os dados dos comentários, remove esse comentário dos dados dos comentários e renderiza novamente a lista de comentários.

Aqui está um código:

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

    ... ...

})

Este processo é muito detalhado!Existe alguma maneira fácil de fazer isso?

Answer 1

Você também pode fazer uma aplicação parcial do manipulador, assim:

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

Quando this.handleDel é chamado, c.id será passado como o primeiro argumento.Você também pode encurtá-lo removendo CommentList.handleDel e apenas fazendo

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

Para um pouco mais de informação sobre este assunto, veja Comunicar-se entre componentes nos documentos do React.

Answer 2

Você também pode tentar gerenciar um estado global do aplicativo que estará disponível para todos os componentes, passado por props.

A cada alteração no estado do aplicativo, você pode renderizar tudo novamente.Ao renderizar novamente a partir do componente de nível superior, você pode tentar otimizar com shouldComponentUpdate.Não testei isso e não sei se é gerenciável para um aplicativo grande.

Além disso, veja como Ah, sim está otimizando shouldComponentUpdate usando estruturas de dados imutáveis.