ant-design 折叠面板Collapse基础用法与实现原理详解【免费下载链接】ant-designAn enterprise-class UI design language and React UI library项目地址: https://gitcode.com/gh_mirrors/antde/ant-design折叠面板Collapse是 ant-design 中用于收纳和展开复杂内容区域的核心展示组件在设置面板、筛选条件分组、FAQ 列表等场景中广泛使用。本文以 components/collapse/demo/basic.md 中的基础示例为主线结合组件 API、源码实现与 Less 样式带你掌握 Collapse 的声明式用法、受控与非受控两种模式以及它基于 rc-collapse 的底层渲染机制。组件定位何时使用折叠面板根据 components/collapse/index.md 的官方说明Collapse 组件用于展示可以折叠/展开的内容区域其典型使用场景包括对复杂区域进行分组和隐藏保持页面整洁避免一次性向用户暴露过多信息手风琴accordion模式一种特殊的折叠面板只允许单个内容区域同时展开适合内容层级清晰、需要一次只看一个的交互场景。快速上手同时展开多个面板的基础示例basic.md展示的是 Collapse 最经典的用法一个 Collapse 容器内放多个 Panel面板默认展开第一个同时允许多个面板并行展开。完整代码如下import { Collapse } from antd; const Panel Collapse.Panel; function callback(key) { console.log(key); } 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. ; ReactDOM.render( Collapse defaultActiveKey{[1]} onChange{callback} Panel headerThis is panel header 1 key1 p{text}/p /Panel Panel headerThis is panel header 2 key2 p{text}/p /Panel Panel headerThis is panel header 3 key3 p{text}/p /Panel /Collapse , mountNode);这段代码拆解如下要素作用Collapse defaultActiveKey{[1]}容器组件通过defaultActiveKey指定初始化时展开的面板 key数组形式表示可多选Panel key...每个可折叠单元key与activeKey中的值一一对应header属性面板头部内容点击后触发展开/收起onChange{callback}切换面板时的回调参数为当前激活面板的 key 数组非受控模式与 defaultActiveKey示例使用的是非受控模式组件内部自行维护展开状态defaultActiveKey只在首次渲染时生效指定了默认展开key1的面板因此页面加载后第一块内容直接可见。由于传入的是数组[1]多个面板可以同时处于展开状态——这正是可以同时展开多个面板这一特性的来源。受控模式与 activeKey如果你需要把展开状态交由外部管理例如与路由、搜索条件联动应改用受控模式传入activeKey并自行在onChange中更新状态此时组件完全由你传入的值驱动。两种模式的核心 API 差异如下来源components/collapse/index.md 的 API 表参数说明类型默认值activeKey当前激活面板的 keyArray or String默认无accordion 模式下默认展开第一个元素defaultActiveKey初始化选中面板的 keyString无onChange切换面板的回调Function无Collapse.Panel面板单元的属性面板单元通过Collapse.Panel取得每个 Panel 的属性如下参数说明类型默认值key对应 Collapse 的 activeKeyString无header面板头内容React.Element or String无header既可以是纯字符串如示例中的This is panel header 1也可以传入任意 React 元素——这意味着你可以在面板头内放置图标、徽标、操作按钮等自定义内容。底层实现Collapse 与 rc-collapse 的关系从源码层面看ant-design 的 Collapse 是一个对社区基础组件库 rc-collapse 的轻量封装。components/collapse/index.jsx 的全部实现如下import Collapse from rc-collapse; import React from react; class AntCollapse extends React.Component { render() { return Collapse {...this.props} /; } } AntCollapse.defaultProps { prefixCls: ant-collapse, }; AntCollapse.Panel Collapse.Panel; export default AntCollapse;可以总结出三点实现事实透传式封装AntCollapse将外部传入的所有 props 原样透传给rc-collapse的Collapse因此 rc-collapse 支持的能力如手风琴、嵌套、动画在 ant-design 中同样可用样式前缀注入通过defaultProps.prefixCls ant-collapse指定 CSS 类名前缀使 rc-collapse 的通用样式与 ant-design 的主题样式即 style/components/collapse.less 中定义的ant-collapse系列类正确对接静态属性挂载AntCollapse.Panel Collapse.Panel将 rc-collapse 的面板子组件直接挂载为静态属性从而支持const Panel Collapse.Panel;的取用方式与示例代码的写法完全吻合。另外在 package.json 中可以看到项目依赖rc-collapse: ~1.6.0即本仓库锁定的底层版本范围。交互细节与视觉呈现来自样式的佐证展开/收起交互的视觉反馈由 style/components/collapse.less 控制几个值得留意的点箭头图标旋转动画面板头左侧的箭头通过transition: transform 0.24s ease实现旋转过渡收起时箭头为270deg.collapse-close()展开aria-expandedtrue时旋转为360deg.collapse-open()形成平滑的指向翻转效果展开动画.ant-collapse-anim-active定义了height .2s ease-out的高度过渡让内容区域的展开/收起不是生硬跳变内容区域.ant-collapse-content背景为白色、带padding: 0 16px与容器浅灰底色#f4f4f4形成层次对比便于区分可折叠外壳与内容正文。这也解释了示例中p{text}/p的内容会被渲染在带内边距的白色内容区内而面板头部则是高 38px 的灰色可点击区域。扩展实战手风琴模式与面板嵌套basic.md之外Collapse 还提供两种高频变体可用于加深理解手风琴模式accordion给Collapse加上accordion属性后每次只允许一个面板展开且默认展开第一个对应 API 表中accordion 模式下默认第一个元素的说明。可参考 components/collapse/demo/accordion.md。面板嵌套Collapse 支持任意层级的嵌套——外层用手风琴模式做分组导航内层用defaultActiveKey做多选展开实现手风琴 多面板的组合布局。可参考 components/collapse/demo/mix.md其中外层onChange同样可以监听到面板切换事件。小结折叠面板的入门用法非常简洁Collapse容器配合Collapse.Panel子面板用defaultActiveKey控制默认展开、用onChange响应切换即可。其背后是 ant-design 对 rc-collapse 的透传封装与ant-collapse前缀样式体系的支撑需要更精细的控制时切换到activeKey受控模式或叠加accordion、嵌套面板等能力即可覆盖从简单分组到复杂导航的大多数折叠交互场景。【免费下载链接】ant-designAn enterprise-class UI design language and React UI library项目地址: https://gitcode.com/gh_mirrors/antde/ant-design创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考