Reactjs如何从不同的组件更改组件的状态

Question

我有一个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元素)？并且不能改变组件状态？

如果是这样,我如何从不是第一个孩子或父母的不同组件中更改组件的状态？

Answer 1

组件不公开暴露其状态.同样重要的是要记住,状态的范围是组件的实例,而不是它们的定义.

要在组件之间进行通信,您可以推送自己的事件订阅服务.

var events = new EventEmitter();

// inside Component1
events.emit('change-state', newState);

// inside Component2
events.on('change-state', function(state) {
  this.setState(state);
});

但是,这很快就会变得难以管理.

更明智的解决方案是使用Flux.它允许您显式管理整个应用程序的状态,并在组件内订阅状态的不同位的更改.值得尝试包围它.

想要通信的组件应该分派一个动作,这个动作将负责改变商店中的某些东西,你的另一个组件应该订阅那个商店,并且可以根据变化更新它的状态.