antd-mobile 的 Collapse 组织展开

Ant Design Mobile (简称antd-mobile) 提供了一个名为 `Collapse` 的组件，它是一个用于展示内容折叠列表的工具。`Collapse` 可以帮助你组织内容并控制其显示状态，通常用于信息分组、选项面板等场景。

使用 `Collapse` 的基本步骤如下：

1. 引入组件：首先在你的 React 组件中导入 `Collapse` 和相关的样式。

import { Collapse } from 'antd-mobile';
import 'antd-mobile/dist/antd-mobile.css';

2. 创建 `<Collapse>` 标签：创建一个 `Collapse` 组件，并提供一系列 `Panel` 子元素，每个 `Panel` 代表一个可以展开的内容块。

const panels = [
  {
    key: '1',
    title: '面板标题一',
    panel: '这是第一个面板的内容',
  },
  {
    key: '2',
    title: '面板标题二',
    panel: '这是第二个面板的内容',
  },
  // 添加更多面板...
];

<Collapse>
  {panels.map(panel => (
    <Panel key={panel.key}>{panel.panel}</Panel>
  ))}
</Collapse>

3. 控制展开状态：`Collapse` 默认有三种状态：关闭 (`collapsed`)、展开 (`active`) 和半展开 (`expanded`)。你可以通过设置 `initialActiveKey` 属性来指定初始打开的面板，或者在按钮点击事件中动态切换展开状态。

<Collapse initialActiveKey={['1']}>
  {/* ... */}
</Collapse>

<button onClick={() => setInitialActiveKey(['2'])}>展开第二面板</button>