React-Semantic-UI Accordion：exclusive=false时closeAll按钮失效问题

我之前在使用Ant Design 0.77.2版本的Collapse组件时，也遇到了一模一样的问题：当设置exclusive={false}允许同时展开多个面板时，自带的closeAll方法完全没反应，只有把exclusive设为true时才正常工作。这其实是这个旧版本组件的一个逻辑缺陷——它的closeAll方法内部只针对互斥展开的场景做了处理，非互斥模式下没有正确更新面板状态。

想要解决这个问题，最可靠的方式是手动维护面板的展开状态，代替组件自带的控制逻辑，具体步骤如下：

1. 在你的组件中添加状态，用来保存当前展开的面板keys：

class YourComponent extends React.Component {
  state = {
    activeKeys: [] // 初始为空，所有面板默认收起
  };
  // ...其他方法
}

2. 给Collapse组件绑定activeKey和onChange属性，让状态和组件联动：

<Collapse
  activeKey={this.state.activeKeys}
  onChange={(activeKeys) => this.setState({ activeKeys })}
  exclusive={false}
>
  <Panel header="面板1" key="1">面板1内容</Panel>
  <Panel header="面板2" key="2">面板2内容</Panel>
  <Panel header="面板3" key="3">面板3内容</Panel>
</Collapse>

3. 自己实现closeAll方法，直接清空activeKeys状态：

closeAll = () => {
  this.setState({ activeKeys: [] });
};

4. 将这个方法绑定到你的按钮上：

<button onClick={this.closeAll}>closeAll</button>

这种方式不仅能解决closeAll失效的问题，还能让你更灵活地控制面板的展开逻辑（比如自定义部分收起、批量展开等），完全避开旧版本组件的bug。

内容的提问来源于stack exchange，提问作者user4412054