react antd 折叠面板

antd 的折叠面板组件是 Collapse，可以通过 Collapse.Panel 子组件来定义需要折叠的内容。

示例代码：

import { Collapse } from 'antd';

const { Panel } = Collapse;

function onChange(key) {
  console.log(key);
}

function App() {
  return (
    <Collapse onChange={onChange}>
      <Panel header="面板1" key="1">
        <p>面板1内容</p>
      </Panel>
      <Panel header="面板2" key="2">
        <p>面板2内容</p>
      </Panel>
      <Panel header="面板3" key="3">
        <p>面板3内容</p>
      </Panel>
    </Collapse>
  );
}

在 onChange 回调函数中可以获取当前展开的面板的 key 值。如果需要默认展开某个面板，可以在 Panel 组件中设置 defaultActiveKey 或 activeKey 属性。