ReactJS GUI 状态

Question

我有一个 React 组件，它根据初始配置对象呈现一堆可折叠的菜单。该对象采用 JSON 格式，但菜单树结构可能如下所示：

Group A
  - Item 1
  - Item 2
  - Item 3

Group B
  - Item 4
  - Item 5
  - Item 6
  - Item 7

用户可以点击标题对象，例如Group A 它将折叠/扩展组 - 本质上是一个手风琴。

每个 group 组件都有数量有限的属性、props 和 state，如下所示：

getDefaultProps: function() {
    return {
        title: '',
        itemsList: [],
        initiallyOpened: true
    };
},

getInitialState: function() {
    return {
        isOpened: this.props.initiallyOpened
    };
}

当用户单击组标题时，我将 isOpened 属性切换为状态。

这非常适合允许用户打开/关闭组，但我也想要一些 全局 行为，例如 open all 或 close all .

我知道我可以显式设置initiallyOpened 属性，这将触发componentWillReceiveProps() 调用，但我不希望initiallyOpened 的值在组件接收到其他一些新属性时持续存在（可能是新项目已添加到列表中）。

我应该在哪里以及如何处理这个 GUI 状态的管理？

Answer 1

在 React 中管理全局状态的推荐方法是采用称为 Flux 的架构模式。

它有很多implementations。