Collapse折叠面板（antd-design组件库）简单使用

约定不等于承诺〃 2023-10-12 21:09 15阅读 0赞

## **1.****Collapse折叠面板** ##

可以折叠/展开的内容区域。

## **2.****何时使用** ##

·对复杂区域进行分组和隐藏，保持页面的整洁。

·手风琴 是一种特殊的折叠面板，只允许单个内容区域展开。

组件代码来自： [折叠面板 Collapse - Ant Design][Collapse - Ant Design]

## **3.****本地验证前的准备** ##

参考文章【react项目+antd组件-demo:hello-world [react项目+antd组件-demo:hello-world\_西晋的no1的博客-CSDN博客][react_antd_-demo_hello-world_no1_-CSDN]】，将 [折叠面板 Collapse - Ant Design][Collapse - Ant Design] 中需要在本地使用的代码复制覆盖**App2.js**中的全部代码，启动代码，可在本地查看现象和更改代码。

**4.****本地验证Collapse的简单用法。**

注意：需要选择与本地验证适合的版本，否则，达不到预期效果。

![93588ed2db914974b38e99559f2c2fe3.png][]

复制下图所示代码，了解Collapse的简单用法-可同时打开多个面板，首次运行默认打开第一个。

![61607a17567746a2a70e8772ce34b640.png][]

**5.****默认展开多个**

**在上一步的基础上增加defaultActiveKey的值, '3'**

**最终****App2.js**中的全部代码如下：

import {Collapse} from 'antd';
 import React from 'react';
 
 const {Panel} = Collapse;
 const text = `
 A dog is a type of domesticated animal.
 Known for its loyalty and faithfulness,
 it can be found as a welcome guest in many households across the world.
 `;
 const App = () => {
 const onChange = (key) => {
 console.log(key);
 };
 return (
 <Collapse defaultActiveKey={['1', '3']} onChange={onChange}>
 <Panel header="This is panel header 1" key="1">
 {text}
 </Panel>
 <Panel header="This is panel header 2" key="2">
 {text}
 </Panel>
 <Panel header="This is panel header 3" key="3">
 {text}
 </Panel>
 </Collapse>
 );
 };
 export default App;

效果图如下：

![3314b77cc3724162b0244fbbc1447a54.png][]

**6.****手风琴的简单用法**

复制下图所示代码，了解Collapse手风琴的简单用法。

![0ddca68a14464561bf564314157d66e0.png][]

本文仅介绍了组件Collapse的部分内容，更多内容请参阅官方文档： [折叠面板 Collapse - Ant Design][Collapse - Ant Design 1]

[Collapse - Ant Design]: https://ant.design/components/collapse-cn#components-collapse-demo-accordion
[react_antd_-demo_hello-world_no1_-CSDN]: https://blog.csdn.net/xijinno1/article/details/130979732
[93588ed2db914974b38e99559f2c2fe3.png]: https://img-blog.csdnimg.cn/93588ed2db914974b38e99559f2c2fe3.png
[61607a17567746a2a70e8772ce34b640.png]: https://img-blog.csdnimg.cn/61607a17567746a2a70e8772ce34b640.png
[3314b77cc3724162b0244fbbc1447a54.png]: https://img-blog.csdnimg.cn/3314b77cc3724162b0244fbbc1447a54.png
[0ddca68a14464561bf564314157d66e0.png]: https://img-blog.csdnimg.cn/0ddca68a14464561bf564314157d66e0.png
[Collapse - Ant Design 1]: https://4x.ant.design/components/collapse-cn/#components-collapse-demo-accordion