如何实现按钮控制Ant Design Collapse组件全部展开/折叠功能

实现方案 #

defaultActiveKey 属于非受控属性，仅在组件首次初始化渲染时生效，无法后续动态修改。要实现动态切换全部展开/折叠，需要使用受控属性 activeKey 绑定状态，通过修改状态值控制面板状态。

以下是适配固定面板数量的代码片段：

import React, { useState } from 'react';
import { Collapse, Button, Space } from 'antd';

const { Panel } = Collapse;
// 按你实际的面板key修改该数组即可，和下方Panel的key一一对应
const ALL_PANEL_KEYS = ['1', '2', '3'];

const CollapseController = () => {
  const [activeKey, setActiveKey] = useState([]);

  return (
    <div style={{ padding: 24 }}>
      <Space style={{ marginBottom: 16 }}>
        <Button onClick={() => setActiveKey(ALL_PANEL_KEYS)}>全部展开</Button>
        <Button onClick={() => setActiveKey([])}>全部折叠</Button>
        {/* 单个切换按钮的写法，不需要可以删除 */}
        <Button 
          onClick={() => setActiveKey(prev => 
            prev.length === ALL_PANEL_KEYS.length ? [] : ALL_PANEL_KEYS
          )}
        >
          切换所有面板状态
        </Button>
      </Space>

      <Collapse activeKey={activeKey} onChange={setActiveKey}>
        <Panel header="面板1" key="1">
          面板1的内容
        </Panel>
        <Panel header="面板2" key="2">
          面板2的内容
        </Panel>
        <Panel header="面板3" key="3">
          面板3的内容
        </Panel>
      </Collapse>
    </div>
  );
};

export default CollapseController;

补充说明 #

• 代码中onChange={setActiveKey}用于保留用户手动点击单个面板切换的能力，不需要该特性可以移除该属性。
• 如果是Ant Design v5版本，API逻辑完全一致，无需额外修改。

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