![](/img/trans.png)
[英]How to update the value a component's state variable in another component in React.js?
[英]React how to update another component's state?
我很反应,试图使一些组件工作。 我有
ObjectA:React.createClass({
propTypes: {
...
},
getInitialState: function() {
return {
myState: null
}
},
updateMyState: function(value) {
this.setState({
myState: value
})
}
render: function() {
return (<div className="my-class">'hello' +{this.state.myState}</div>);
}
});
ObjectB:React.createClass({
propTypes: {
...
},
render: function() {
return (<div className="my-class"><ObjectA / >
</div>);
}
});
我想从ObjectB更新ObjectA的状态。 我怎么能在ObjectB中调用ObjectA的updateMyState方法? 谢谢!
React的基本思想是单向数据流。 这意味着数据仅通过子项的属性从祖先组件向下传递给子组件。 对于这个简单的例子,我们将Flux(如体系结构和事件发射器)排除在等式之外,因为它根本不是必需的。
然后,从外部更改组件状态的唯一方法是更改它在父级的render方法中接收的道具。 所以myState实际上将存在于ObjectB中并被赋予ObjectA作为属性。 在您的示例中,如下所示:
ObjectA:React.createClass({
propTypes: {
...
},
render: function() {
return (<div className="my-class">'hello' +{ this.props.name }</div>);
}
});
ObjectB:React.createClass({
propTypes: {
...
},
getInitialState: function() {
return {
name: null
}
},
onNameChange: function(newName) {
this.setState({ name: newName })
},
render: function() {
return (
<div className="my-class">
<ObjectA name={ this.state.name } />
</div>
);
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.