Javascript 反应JS GUI状态

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

Group A
  - Item 1
  - Item 2
  - Item 3

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

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

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

用户可以单击标题对象，例如

组A

，它将折叠/展开组-基本上是一个手风琴

每个组组件都有数量有限的属性、道具和状态，如下所示：

Group A
  - Item 1
  - Item 2
  - Item 3

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

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

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

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

这对于允许用户打开/关闭组非常有效，但我也希望有一些全局行为，例如全部打开或全部关闭

我知道我可以显式地设置

initiallyOpened

prop，这将触发

componentWillReceiveProps（）

调用，但我不希望

initiallyOpened

的值在组件接收到其他一些新的props时保持不变（可能会向列表中添加一个新项）

---

我应该在何处以及如何处理此GUI状态的管理？

在React中管理全局状态的推荐方法是使用名为的架构模式

它有很多