Reactjs 用户界面事件的流量操作

我在我的应用程序中使用react和flux，在我的应用程序中有两个组件：TreeView和TableView，它们从两个不同的存储中获取

我想添加一个选项-当我在TableView中单击一行时，它将在我的TreeView中打开相关节点

我的问题是：这两个组件应该如何相互对话？在AngularJS/Backbone中，我将使用一个事件聚合器模式，并将广播一个类似“objectSelected”的事件及其id

我应该如何在使用flux体系结构时做到这一点——我认为使用flux方式——并创建一个操作，但是我的存储将保存UI状态（哪些节点是打开的），我认为组件（在本例中是TreeView）应该保存这个状态（而不是存储）

---

那么，在react中两个组件之间进行对话的正确方法是什么呢？

如果您不想使用flux，那么您可以将动作作为道具传递给父组件

我唯一使用的flux实现是Fluxxor。使用fluxxor（可能还有大多数flux实现），您可以同时拥有组件状态和存储状态。如果您的表和树总是要链接（同时打开或关闭），我认为可以将其保存在商店中

你可以做一些像

TableComponent = React.createClass({
  getInitialState: function() {
    return {
      //component specific state
    };
  },

  getStateFromFlux: function() {
    // flux store state
    return {
      appStore: this.getFlux().store('AppStore').state
    }
  },

  handleClick: function(tree) {
    this.getFlux().actions.appActions.toggleTree(tree);
  }
});

---

Hi@Jon，在商店中保存ui状态的设计明智吗？尽可能避免在商店中保存组件状态。在这种情况下，我认为如果不同的组件都依赖于特定的存储来保存打开/关闭状态是可以的。如果这让您感到不舒服，那么添加一个父组件来处理两个子组件的打开/关闭状态：）以及子组件将如何与父组件对话？在父级上使用公共函数？父母会改变道具，然后把道具传给孩子们？