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

我有一个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>) }
   });
}

define（[…，/path/component_2.jsx]，function（…，Component2）{
var Component1=React.createClass({
getInitialState:函数（）{
返回{……}；
},
componentDidMount:function（）{
.......
日期=。。。。；
组件2.setState（{dates:dates}）；
}
呈现：函数（）{return（）}
});
}

如您所见，我正在调用此组件中的Component2.setState。但我遇到了一个错误，就像setState不是函数一样。我尝试在组件2中定义一个自定义函数而不是setState函数，并从组件1调用此函数，但我得到了相同的错误，“不是函数”

和第2部分：

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

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

定义（[…，]函数（…）{
var Component2=React.createClass({
getInitialState:函数（）{
返回{……}；
},
呈现：函数（）{return（）}
});
}

所以我猜在reactjs中，我们调用组件只是为了呈现某些东西（ReactDOM元素）？而不能更改组件状态

---

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

组件不会公开其状态。记住，状态的作用域是组件的实例，而不是组件的定义

要在组件之间通信，您可以启动自己的事件订阅服务

var events = new EventEmitter();

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

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

然而，这将很快变得难以管理

一个更明智的解决方案是使用。它允许您显式管理整个应用程序的状态，并在组件中订阅状态不同部分的更改。值得尝试一下

---

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

您可以在两个组件之间使用共享状态。 你可以建立这样的“混合”

app.mixins.DateMixin = {
   getInitialState: function () 
      return {
          dates: []
         }
      }
};

然后在组件中，可以使用mixins数组包含这个mixin

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>) }
   });
}

define（[…，/path/component_2.jsx]，function（…，Component2）{
var Component1=React.createClass({
mixin:[app.mixins.DateMixin]，
getInitialState:函数（）{
返回{……}；
},
componentDidMount:function（）{
.......
日期=。。。。；
this.setState（{dates:dates}）；
}
呈现：函数（）{return（）}
});
}
定义（[…，]，函数（…）{
mixin:[app.mixins.DateMixin]，
var Component2=React.createClass({
getInitialState:函数（）{
返回{……}；
},
呈现：函数（）{return（）}
});
}

现在，您的组件共享“日期”状态，您可以在这两个状态中更改/检查它。 注意：您还可以通过写入mixin组件的相同方式与共享方法

---

编辑：我建议您访问此网站

React plans to，因此今后最好尝试并找到不依赖它们的解决方案。@DanPrince真的吗？嗯..只要阅读有关混合的精彩文档，rakwaht postedIt将不会在下一版本中出现，但React团队正在努力寻找更好的解决方案。有一个讨论。@DanPrince在这里我发布了回购协议所有者的回答。“我们还没有准备好拒绝Mixin，因为我们没有很好的替代品来替代它们的所有用例。当我们这样做时，我们可能会转向拒绝Mixin和React.createClass，但这至少需要几个月的时间。”然而，我认为你是对的，最好找到另一种方法来解决这类问题，但目前这是我所知道的唯一一种解决这类问题的模式，这是在4个月前的6月9日发布的。根据React v0.14的变化程度，如果它们在接下来的几个版本中被弃用，我不会感到惊讶。