5 分钟搞定 Material-UI Accordion：折叠面板从基础到嵌套 FAQ 实战

5 分钟搞定 Material-UI Accordion折叠面板从基础到嵌套 FAQ 实战【免费下载链接】material-uiMaterial UI: Comprehensive React component library that implements Googles Material Design. Free forever.项目地址: https://gitcode.com/GitHub_Trending/ma/material-uiMaterial-UImui/material的折叠面板 Accordion 是收纳页面内容的标准组件。本文一次讲清 React 折叠面板用法4 个核心组件分工、常用属性速查、Accordion 受控组件写法、unmountOnExit 性能优化、ARIA 无障碍配对以及嵌套折叠面板实战看完就能用在 FAQ 和文档目录上。什么页面需要折叠面板产品 FAQ、设置页的分区开关、文档侧边目录都是它的典型战场。共同点是内容层级多、一次全展示会刷屏但用户其实只关心其中一两块。折叠面板让收起成为默认姿态把首屏留给真正重要的内容。组件角色拆解一个四人小队把 Accordion 系统想成四个角色在搭积木组件角色比喻干什么的Accordion整扇门容器持有展开状态第一个子元素必须是 SummaryAccordionSummary门把手标题栏整块可点击展开/折叠就靠它AccordionDetails门后的房间包裹正文内容AccordionActions门内的按钮面板可选横排操作按钮如了解更多重置状态通过 Context 在Accordion和AccordionSummary之间传递所以你不需要手动把它们绑在一起写对顺序即可。组件源码在packages/mui-material/src/Accordion、packages/mui-material/src/AccordionSummary、packages/mui-material/src/AccordionDetails、packages/mui-material/src/AccordionActions四个目录下。最小可用示例先看最简的长什么样import * as React from react; import Accordion from mui/material/Accordion; import AccordionDetails from mui/material/AccordionDetails; import AccordionSummary from mui/material/AccordionSummary; import Typography from mui/material/Typography; export default function BasicAccordion() { return ( Accordion AccordionSummary Typography什么是 Material-UI/Typography /AccordionSummary AccordionDetails Typography一个实现 Material Design 的 React 组件库。/Typography /AccordionDetails /Accordion ); }就这一小段一个能点开的 Material-UI 折叠面板就出来了Summary 是把手Details 是房间点把手房间就现形。属性速查表常用配置一目了然属性类型默认值一句话说明expandedbool—受控模式下的展开状态面板完全听你的defaultExpandedboolfalse首次渲染是否展开之后面板自己管onChangefunc—状态变化回调签名(event, isExpanded)disabledboolfalse禁用整个面板点 Summary 无反应expandIconnode—传给 Summary右侧的展开指示图标squareboolfalse去掉圆角适合贴边排布disableGuttersboolfalse展开时不加上下 16px 间距slotProps.transitionobject{}控制内部 Collapse 的timeout、unmountOnExit等挑两个高频的看一眼。想换掉默认的箭头把expandIcon塞给 Summary旋转动画组件自己就帮你做了想锁住某个面板直接在Accordion上写disabled就行Summary 会跟着变灰不可点。import ArrowDropDownRoundedIcon from mui/icons-material/ArrowDropDownRounded; AccordionSummary expandIcon{ArrowDropDownRoundedIcon /} Typography自定义图标面板/Typography /AccordionSummary三种交互模式让面板听你的话React 折叠面板的玩法无非三种状态管理姿势按需求对号入座。非受控最简单面板自己记状态你只给初始值Accordion defaultExpanded AccordionSummary Typography默认展开/Typography /AccordionSummary AccordionDetails Typography首屏就想让用户看到的内容。/Typography /AccordionDetails /Accordion适用场景FAQ 里那条什么是 X想默认摊开其余随用户点。受控状态提到父组件面板变成纯展示这是典型的 Accordion 受控组件用法const [expanded, setExpanded] React.useState(false); Accordion expanded{expanded} onChange{(event, isExpanded) setExpanded(isExpanded)} AccordionSummary Typography受控面板/Typography /AccordionSummary AccordionDetails Typography状态在父组件手里。/Typography /AccordionDetails /Accordion适用场景展开后要联动其他逻辑比如埋点、跳转锚点、同步侧边栏高亮。手风琴模式多个面板互斥一次只开一个。用一个字符串存当前打开的是谁const [expanded, setExpanded] React.useState(panel1); {[panel1, panel2, panel3].map((id) ( Accordion key{id} expanded{expanded id} AccordionSummary Typography{问题 ${id.slice(-1)}}/Typography /AccordionSummary AccordionDetails Typography答案 {id}/Typography /AccordionDetails /Accordion ))}点开新的旧的自动收回——这是 FAQ 页面最常见的交互节奏。进阶两件事性能与无障碍性能上有个反直觉的点折叠面板收起时内容 DOM 其实还挂在树里Collapse 只是把高度收到 0。面板少时无所谓一旦页面上几十个面板、或 Details 里塞了复杂组件树白养的节点就开始拖累查询和内存。解决办法是把unmountOnExit: true递进slotProps.transitionAccordion slotProps{{ transition: { unmountOnExit: true } }}注意transition是内部插槽属性必须从这里递进去直接挂在Accordion上是无效的。无障碍方面组件会自己生成aria-controls/aria-labelledby配对只有你手动覆盖 id比如接入路由锚点时才需要手动补齐Accordion AccordionSummary idfaq-title aria-controlsfaq-content Typography常见问题标题/Typography /AccordionSummary AccordionDetails idfaq-content aria-labelledbyfaq-title Typography面板正文。/Typography /AccordionDetails /Accordion记住配对关系标题管controls指内容内容靠labelledby指标题屏幕阅读器就讲得清谁控制谁。嵌套折叠面板实战文档目录来了外层一个主面板分组内层两个子面板列具体条目——文档目录、分类 FAQ 都是这个骨架Accordion AccordionSummary Typography折叠面板 Accordion 指南/Typography /AccordionSummary AccordionDetails Accordion AccordionSummary Typography基础用法与属性/Typography /AccordionSummary AccordionDetails Typography导入、渲染以及 defaultExpanded 等配置。/Typography /AccordionDetails /Accordion Accordion defaultExpanded AccordionSummary Typography受控模式与手风琴/Typography /AccordionSummary AccordionDetails Typography用 state 管理 expanded实现互斥展开。/Typography /AccordionDetails /Accordion /AccordionDetails /Accordion这种外层管分组、内层管条目的嵌套结构特别适合文档站的目录树、电商的类目 FAQ、设置页的多级分组——层级再多用户每次也只面对一层。避坑小贴士ExpandMoreIcon属于图标包要单独import ExpandMoreIcon from mui/icons-material/ExpandMore忘了导会报 undefined。嵌套时外层 Summary 别再给expandIcon内层面板自带箭头否则右侧会出现两个图标打架。unmountOnExit、timeout这类过渡参数走slotProps.transition不要直接传给Accordion传了也不生效。disabled加在Accordion上不是 Summary 上后者只是把手锁不住整扇门。延伸阅读官方文档docs/data/material/components/accordion/accordion.md组件源码目录packages/mui-material/src/Accordion受控示例代码docs/data/material/components/accordion/ControlledAccordions.js【免费下载链接】material-uiMaterial UI: Comprehensive React component library that implements Googles Material Design. Free forever.项目地址: https://gitcode.com/GitHub_Trending/ma/material-ui创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考