javascript - 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 is not a function。我尝试通过在组件 2 中定义一个自定义函数而不是 setState 函数并从组件 1 调用该函数来尝试此操作，但我遇到了同样的错误，“不是函数”。

和组件 2:

define([..., ], function(...) {
   var Component2 = React.createClass({
      getInitialState: function() {
         return {.......};
      },

      render: function() { return (<div ...></div>) }
   });
}

所以我想在 reactjs 中我们调用一个组件只是为了渲染某些东西(React DOM 元素)？并且不能改变组件状态？

如果是这样，我怎样才能从不是 first 的子组件或父组件的不同组件更改组件的状态？

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 .它允许您显式管理整个应用程序的状态，并在您的组件中订阅状态的不同位的变化。值得尝试全神贯注。

想要通信的组件应该调度一个 Action ，这个 Action 将负责改变商店中的东西，你的其他组件应该订阅那个商店并可以根据变化更新它的状态。