[英]Reactjs how to change the state of a component from a different component
我有一个react组件,让我们将其称为组件1
define([..., /path/component_2.jsx], function(..., Component2) {
var Component1 = React.createClass({
getInitialState: function() {
return {.......};
},
componentDidMount: function() {
.......
dates = ....;
Component2.setState({dates: dates});
}
render: function() { return (<div ...></div>) }
});
}
如您所见,我在此组件中调用Component2.setState。 但我得到一个错误,如setState不是一个函数。 我尝试在组件2中定义自定义函数而不是setState函数,并从组件1调用此函数,但我得到相同的错误,'不是函数'。
和组件2:
define([..., ], function(...) {
var Component2 = React.createClass({
getInitialState: function() {
return {.......};
},
render: function() { return (<div ...></div>) }
});
}
所以我想在reactjs中我们只调用一个组件来渲染某些东西(React DOM元素)? 并且不能改变组件状态?
如果是这样,我如何从不是第一个孩子或父母的不同组件中更改组件的状态?
组件不公开暴露其状态。 同样重要的是要记住,状态的范围是组件的实例 ,而不是它们的定义。
要在组件之间进行通信,您可以推送自己的事件订阅服务。
var events = new EventEmitter();
// inside Component1
events.emit('change-state', newState);
// inside Component2
events.on('change-state', function(state) {
this.setState(state);
});
但是,这很快就会变得难以管理。
更明智的解决方案是使用Flux 。 它允许您显式管理整个应用程序的状态,并在组件内订阅状态的不同位的更改。 值得尝试包围它。
想要通信的组件应该分派一个动作,这个动作将负责改变商店中的某些东西,你的另一个组件应该订阅那个商店,并且可以根据变化更新它的状态。
您可以在两个组件之间使用共享状态。 你可以像这样构建一个“mixin”
app.mixins.DateMixin = {
getInitialState: function ()
return {
dates: []
}
}
};
然后在你的组件中,你可以使用mixins数组包含这个mixins
define([..., /path/component_2.jsx], function(..., Component2) {
var Component1 = React.createClass({
mixins: [app.mixins.DateMixin],
getInitialState: function() {
return {.......};
},
componentDidMount: function() {
.......
dates = ....;
this.setState({dates: dates});
}
render: function() { return (<div ...></div>) }
});
}
define([..., ], function(...) {
mixins: [app.mixins.DateMixin],
var Component2 = React.createClass({
getInitialState: function() {
return {.......};
},
render: function() { return (<div ...></div>) }
});
}
现在,您的组件共享“日期”状态,您可以在两个组件中更改/检查它。 注意:您也可以通过写入mixin组件以相同的方式共享方法。
编辑:我建议你访问这个网站http://simblestudios.com/blog/development/react-mixins-by-example.html
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.