I have a comment box like this:
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?
To pass data from child to parent component in React:Pass a function as a prop to the Child component. Call the function in the Child component and pass the data as arguments. Access the data in the function in the Parent .
In other words, data flows only one way, from the parent to the child component, in the case of React. The reverse of that, i.e. passing data from the child to the parent is not possible, at least not in theory. Data can be passed from the parent to the child component via props.
You can't pass props from child to parent in React, it's only one way (from parent to child). You should either: Put the state in the parent component and manipulate it from the child component by passing the setter function in the props.
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With