How to easily pass data from child to root in reactjs?

Question

I have a comment box like this:

enter image description here

I have bound all actions to CommentBox component, there is a decComment action to handle Delete event in each comment.

Everytime when i click the delete button in Comment I need to pass the commentId of Comment to CommentList to CommentBox and then CommentBox updates comment data, removes that comment from comments data and re-renders the comment list.

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

    ... ...

})

This process too verbose! Is there any easy way to do this?

Why is this "too verbose"? In each component you can rename the handler to what is appropriate for the component: in Comment you are handling a "click", but outside that component the notion of a click is irrelevant. In CommentList you're looking for a "delete" with "onDel". Stick with this and see what you think when you come back to the code in a month. I have found this approach more descriptive than having a bunch of listeners on document.body. — Ross Allen
– Ross Allen, Commented Feb 25, 2014 at 16:00

Sophie Alpert · Accepted Answer · 2014-02-25 06:23:38Z

4

You can also do a partial application of the a handler, like so:

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

When this.handleDel is called, c.id will be passed as the first argument. You can also shorten it by removing CommentList.handleDel and just doing

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

For a little more info on this topic, see Communicate Between Components in the React docs.

answered Feb 25, 2014 at 6:23

Sophie Alpert

144k37 gold badges229 silver badges244 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

nimgrg Over a year ago

Can we not attach a click handler using React on the top level CommentBox component and listen to any clicks from the Comment component without having to pass the clickHandler all the way down from the CommentBox to CommentList and then to Comment.

Sebastien Lorber · Accepted Answer · 2014-02-26 09:58:17Z

1

You can also try to manage a global application state that will be available to all components, passed by props.

On every change to the application state, you can re-render the whole thing. As you rerender from the top-level component you may try to optimize with shouldComponentUpdate. I didn't test that and don't know if it is manageable for a large application however.

Also, take a look at how Om is optimizing shouldComponentUpdate by using immutable data structures.

answered Feb 26, 2014 at 9:58

Sebastien Lorber

92.6k76 gold badges302 silver badges430 bronze badges

Collectives™ on Stack Overflow

How to easily pass data from child to root in reactjs?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related