React child component props are not updating
Question
I'm trying to render a component let say Counter to another component Panel on its componentDidMount. I'm also passing a state called count as props to Counter . On certain interval, I'm updating the state. But the problem is the props of Counter is not updating. The prop still remains the initial value. What is the reason?
/** @jsx React.DOM */
var Panel = React.createClass({
getInitialState: function(){
return {
count: 0
}
},
tick: function() {
setInterval(function(that) {
that.setState({
count: that.state.count + 1
});
}, 500, this);
},
componentDidMount: function() {
var panel = React.findDOMNode(this.refs.panel);
React.render(<Counter count={this.state.count}/>, panel);
this.tick();
},
render: function(){
return <div ref="panel"></div>;
}
});
var Counter = React.createClass({
render: function() {
return <p>{this.props.count}</p>
}
});
React.render(<Panel/>, document.getElementById('container'));
<body>
<div id="container"></div>
</body>
I like to know the react reason why this code doesn't work
JS Bin check here
1 answers
solution1
1 2015-08-13 19:02:33
This code is bananas. Why are you calling React.render inside a component? Just render the counter in your render function.
/** @jsx React.DOM */
var Panel = React.createClass({
getInitialState: function(){
return {
count: 0
}
},
tick: function() {
setInterval(function(that) {
that.setState({
count: that.state.count + 1
});
}, 500, this);
},
componentDidMount() {
this.tick();
},
render: function(){
return <div ref="panel"><Counter count={this.state.count}/></div>;
}
});
var Counter = React.createClass({
render: function() {
return <p>{this.props.count}</p>
}
});
React.render(<Panel/>, document.getElementById('container'));
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.