Material-UI Accordion 折叠面板3 个高频场景带你写出 FAQ 手风琴【免费下载链接】material-uiMaterial UI: Comprehensive React component library that implements Googles Material Design. Free forever.项目地址: https://gitcode.com/GitHub_Trending/ma/material-ui做 FAQ 页、设置分组、文档目录时页面内容总是一股脑全铺出来用户得滚半天才找到想要的那条。Material-UI 的 Accordion 折叠面板就是来解决这个问题的把大块内容收进「点一下才展开」的面板里标题、动画、无障碍标签全部内置你只负责写内容。它替你搞定什么展开/收起的过渡动画自动处理连标题右侧的箭头旋转都不用你写。ARIA 关系aria-expanded、aria-controls、region 角色已内置屏幕阅读器开箱可用。受控/非受控两种模式自由切换想「一次只开一个」也只差一行状态。三步跑通最小示例这段代码演示一个最简可运行的 Material-UI 折叠面板import Accordion from mui/material/Accordion; import AccordionDetails from mui/material/AccordionDetails; import AccordionSummary from mui/material/AccordionSummary; import Typography from mui/material/Typography; Accordion AccordionSummary是什么/AccordionSummary AccordionDetails Typography面板正文可放任意 React 组件。/Typography /AccordionDetails /AccordionAccordion是容器负责展开状态AccordionSummary是标题区点击即切换AccordionDetails包裹正文。三件套齐了就能跑。关键配置速查属性作用建议值 / 默认值defaultExpanded非受控模式下的初始状态falseFAQ 首项可设trueexpanded受控模式的展开状态由父组件 state 驱动onChange状态变化回调(event, isExpanded)受控时必配disabled禁用该面板交互falsedisableGutters去掉展开时的上下间距让多面板无缝衔接连续排列时设trueexpandIconSummary自定义展开指示图标默认不传即可三种高频用法让默认面板直接展开首条 FAQ 通常希望一进来就可见省一次点击Accordion defaultExpanded AccordionSummary退款政策/AccordionSummary AccordionDetailsTypography7 天无理由……/Typography/AccordionDetails /Accordion需要换指示图标时给AccordionSummary传expandIcon{ExpandMoreIcon /}旋转动画自动完成。让状态由父组件接管想要「点 B 时 A 自动收起」这类联动就得把状态外提const [open, setOpen] React.useState(faq1); Accordion expanded{open faq1} onChange{(e, isExpanded) setOpen(isExpanded ? faq1 : null)} 让多面板无缝连排默认展开的两个面板之间会有 16px 间隙连续 FAQ 列表用disableGutters去掉更整洁Accordion disableGutters defaultExpanded expanded{open a} onChange{(e, v) setOpen(v ? a : null)}踩坑与调优Accordion的第一个子元素必须是元素本身包Fragment或React.Fragment会直接报错。expanded和defaultExpanded只能二选一同时传会进入受控模式并警告。收起时内容仍挂载在 DOM 里里面是重组件地图、大表格时用slotProps{{ transition: { unmountOnExit: true } }}让收起即卸载换取更少节点。多个面板并列时别手动加margin间隙由组件自己算改了反而对不齐分割线。组合玩法实战一个受控 FAQ 列表把前面几招合起来就是一个常见的「单开」FAQ 页const [open, setOpen] React.useState(q1); {faqs.map((f) ( Accordion key{f.id} disableGutters expanded{open f.id} onChange{(e, v) setOpen(v ? f.id : null)} AccordionSummary{f.q}/AccordionSummary AccordionDetailsTypography{f.a}/Typography/AccordionDetails /Accordion ))}同一状态源让展开互斥disableGutters让列表连成一整块两条 FAQ 就齐活了。延伸阅读官方文档docs/data/material/components/accordion/accordion.md组件源码packages/mui-material/src/Accordion受控示例docs/data/material/components/accordion/ControlledAccordions.jsAccordion 三件套加上一个状态源你的 FAQ、设置分组、文档目录就都有了——剩下的只是把内容填进去。【免费下载链接】material-uiMaterial UI: Comprehensive React component library that implements Googles Material Design. Free forever.项目地址: https://gitcode.com/GitHub_Trending/ma/material-ui创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考