Reactjs如何从不同的组件改变组件的状态答案

【问题标题】：Reactjs how to change the state of a component from a different componentReactjs如何从不同的组件改变组件的状态
【发布时间】：2016-02-21 09:51:19
【问题描述】：

我有一个 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 的子级或父级的不同组件更改组件的状态？

【问题讨论】：

标签： javascript ruby-on-rails-4 backbone.js reactjs

【解决方案1】：

您可以在两个组件之间使用共享状态。你可以像这样构建一个“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

【讨论】：

React 计划使用eventually deprecate mixins，因此最好尝试找到不依赖它们的解决方案。
@DanPrince 真的吗？嗯.. 只需阅读 rakwaht 发布的关于 mixin 的好文档
下一个版本不会发生这种情况，但 React 团队正在努力寻找更好的解决方案。有一个讨论here。
@DanPrince 我在这里发布了回购所有者的答案。 “我们还没有准备好弃用 mixins，因为我们没有很好的替代品来替代它们的所有用例。当我们这样做时，我们可能会转向弃用 mixins 和 React.createClass，但这至少需要几个月的时间。”但是我认为你是对的，最好找到另一种方法来做到这一点，但目前这是我知道解决此类问题的唯一模式
请记住，这是在 4 个月前的 6 月 9 日发布的。根据 React v0.14 中的变化，如果它们在接下来的几个版本中被弃用，我不会感到惊讶。

【解决方案2】：

组件不会公开它们的状态。同样重要的是要记住，状态的范围是组件的实例，而不是它们的定义。

要在组件之间进行通信，您可以推出自己的事件订阅服务。

var events = new EventEmitter();

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

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

但是，这很快就会变得难以管理。

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

想要通信的组件应该派发一个动作，这个动作将负责更改存储中的某些内容，您的其他组件应该订阅该存储并可以根据更改更新其状态。

【讨论】：