¿Cómo pasar fácilmente datos del niño al root en reaccionarjs?

Question

Tengo un cuadro de comentarios como este:

He vinculado todas las acciones al componente CommentBox, hay una acción decComment para manejar Delete evento en cada comentario.

Cada vez que hago clic en el delete botón en Comment necesito pasar el commentId de Comment a CommentList a CommentBox y luego CommentBox actualiza los datos de los comentarios, elimina ese comentario de los datos de los comentarios y vuelve a representar la lista de comentarios.

Aquí hay un 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 proceso es demasiado detallado!¿Hay alguna manera fácil de hacer esto?

Answer 1

También puedes hacer una aplicación parcial del controlador a, así:

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

Cuando this.handleDel se llama, c.id se pasará como primer argumento.También puedes acortarlo quitando CommentList.handleDel y solo haciendo

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

Para obtener un poco más de información sobre este tema, consulte Comunicarse entre componentes en los documentos de React.

Answer 2

También puede intentar administrar un estado de aplicación global que estará disponible para todos los componentes, pasado por accesorios.

Con cada cambio en el estado de la aplicación, puede volver a renderizarlo todo.A medida que vuelve a renderizar desde el componente de nivel superior, puede intentar optimizar con shouldComponentUpdate.No lo probé y, sin embargo, no sé si es manejable para una aplicación grande.

Además, eche un vistazo a cómo om esta optimizando shouldComponentUpdate mediante el uso de estructuras de datos inmutables.