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-ui为什么 FAQ 页需要一个折叠面板客服 FAQ、账号设置、长表单分组这类页面的共同点是内容多但每次只用一小块。一屏平铺会让用户翻到头晕折叠面板Accordion把收起/展开的交互标准化了点击标题展开内容其余面板保持收起。Material-UI 的 Accordion 就是干这件事的而且把展开动画、ARIA 属性、键盘操作都内置好了你只负责内容。一句话定位由四个子组件组成把相关内容的显示/隐藏交互标准化替代自己手写展开状态和动画。先看清四个子组件各管什么组件职责是否必需典型位置Accordion容器管理展开/收起状态与过渡动画是每个面板一个AccordionSummary标题区内部是button点击触发切换是必须是Accordion的第一个子元素AccordionDetails包裹正文内容是Summary 之后AccordionActions底部操作按钮组保存、取消等否放在 Details 之后或之内最小可运行示例import Accordion from mui/material/Accordion; import AccordionDetails from mui/material/AccordionDetails; import AccordionSummary from mui/material/AccordionSummary; import Typography from mui/material/Typography; import ExpandMoreIcon from mui/icons-material/ExpandMore; export default function FaqItem() { return ( Accordion AccordionSummary expandIcon{ExpandMoreIcon /} Typography如何修改密码/Typography /AccordionSummary AccordionDetails Typography进入账号设置页面点击修改密码。/Typography /AccordionDetails /Accordion ); }几个关键写法AccordionSummary必须是第一个子元素——源码里第一个孩子被固定解读为 summary顺序错了会直接报错。expandIcon放在 Summary 上而不是 Accordion 上图标翻转动画组件自动处理不用写 transition。Summary 里放Typography这类内联元素因为它渲染在h3标题标签里塞块级元素会破坏 DOM 结构。高频参数速查属性默认值作用什么时候用defaultExpandedfalse初始展开想让第一个面板默认打开expanded—受控展开状态需要单开联动时必须配onChangeonChange—展开状态变化回调第二参数是新状态受控模式必传disabledfalse禁用交互和焦点权限未开放的面板disableGuttersfalse面板贴边、展开不加 16px 上下边距紧凑列表、无限长 FAQexpandIconSummary—自定义展开指示图标设计稿不是默认箭头时slotProps.transitionCollapse配置过渡如unmountOnExit内容重组件需要收起即卸载slotProps.heading.componenth3改标题标签层级页面标题层级要求不是 h3三个最容易踩的坑坑 1用 Fragment 包 Summary// 错误map 里 Fragment 包着 SummaryAccordion 要求第一个子元素是 Summary 本身 {items.map((item) ( Fragment key{item.id} AccordionAccordionSummary.../AccordionSummary// 正确把 key 和 Accordion 放在一起 {items.map((item) ( Accordion key{item.id} disabled{item.locked} AccordionSummary expandIcon{ExpandMoreIcon /}原因Accordion 只认第一个子元素是 SummaryFragment 会被判定为非法直接报错。坑 2只传expanded不传onChange// 错误状态锁死点了没反应 Accordion expanded{open} /// 正确受控组件三件套——expanded onChange setState const [open, setOpen] React.useState(false); Accordion expanded{open} onChange{(e, isExpanded) setOpen(isExpanded)} /原因expanded一旦传入组件就进入受控模式不接onChange状态永远不变。坑 3多个面板不放进同一容器// 错误map 里平铺外面没有统一父容器 {panels.map((p) ( Accordion key{p.id}.../Accordion ))}// 正确包一层 div或其他块级容器 div {panels.map((p) ( Accordion key{p.id} defaultExpanded{p.id panels[0].id}原因首尾圆角和相邻分割线靠 CSS 兄弟选择器:first-of-type、 实现Accordion 们必须是同级兄弟节点。进阶一只允许一个面板展开FAQ 页最常见的需求是单开模式状态不用布尔值用一个string | false记录当前展开的面板 idonChange 写成柯里化函数三个面板复用同一个 handlerconst [expanded, setExpanded] React.useState(p1); const handleChange (panel) (event, isExpanded) setExpanded(isExpanded ? panel : false); Accordion expanded{expanded p1} onChange{handleChange(p1)}注意expanded p1这种比较写法——这是 MUI 官方示例ControlledAccordions的原型。如果希望总有一个开着把: false换成上一个面板 id 即可。嵌套面板面板里再放面板直接把新的 Accordion 写进 AccordionDetails 即可无需额外配置两层面板共用同一套 ARIA 结构注意嵌套层标题层级要用slotProps.heading.component往下顺。进阶二收起后面板内容为什么还在内存里默认行为是内容始终挂载、只是视觉收起这是为了 SSR 和 SEO——爬虫能读到收起状态的内容。如果你的面板里是大表格、图表、富文本编辑器几十个面板一起渲染会明显拖慢首次渲染这时让过渡组件收起即卸载Accordion slotProps{{ transition: { unmountOnExit: true } }} AccordionSummary大内容面板/AccordionSummary AccordionDetails{/* 重组件 */}/AccordionDetails /AccordionunmountOnExit: true传给内部的 Collapse代价是 SSR 首屏拿不到收起内容。需要 SEO 的面板保持默认纯客户端的重组件面板才开。无障碍方面给 Summary 配idaria-controlsregion 的aria-labelledby会自动派生屏幕阅读器就能理解点这个按钮会展开哪块内容AccordionSummary idp1-header aria-controlsp1-content上线前自检第一个面板defaultExpanded或受控初始值给了合理的默认态需要单开的面板组expanded和onChange成对出现点击有响应Summary 上有id和aria-controls屏幕阅读器可识别标题层级正确默认 h3用slotProps.heading.component顺平页面层级列表渲染时 key 在 Accordion 上没有 Fragment 包第一个子元素多个面板包在同一父容器内首尾圆角和分割线正常重组件面板已评估unmountOnExitSSR 页面确认首屏内容完整延伸阅读组件文档含全部示例与 API 说明docs/data/material/components/accordion/accordion.mdAccordion 源码目录状态管理在 useControlled过渡在 TransitionSlotpackages/mui-material/src/Accordion/受控单开模式示例docs/data/material/components/accordion/ControlledAccordions.tsx自定义主题示例docs/data/material/components/accordion/CustomizedAccordions.tsx【免费下载链接】material-uiMaterial UI: Comprehensive React component library that implements Googles Material Design. Free forever.项目地址: https://gitcode.com/GitHub_Trending/ma/material-ui创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考