首先，在折叠面板（Collapse）组件中加入一个展开 / 折叠全部按钮。这个按钮可以用 Ant Design 的 Button 组件来实现。给它添加一个点击事件，展开全部时设置 activeKey 属性为所有折叠面板的 key 值，折叠全部时将 activeKey 属性设为空数组。具体代码如下：

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

const { Panel } = Collapse;

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

  const expandAll = () => {
    setActiveKey(['1', '2', '3', '4']);
  };

  const collapseAll = () => {
    setActiveKey([]);
  };

  return (
    

      展开全部
      折叠全部
      <
        
          
面板内容
        
        
          
面板内容
        
        
          
面板内容
        
        
          
面板内容
        
      
    
  );
};

export default Example;

以上代码中，通过 useState 钩子来声明一个 activeKey 状态变量，同时初始化为空数组，作为 Collapse 的 activeKey 属性值。同时也声明了 expandAll 和 collapseAll 两个处理函数来控制 activeKey 的值。在 JSX 中，使用 Ant Design 的 Button 组件来实现 “展开全部”和“折叠全部”两个按钮，给它