Material Design 是由 Google 设计的一套 UI 设计语言，许多前端框架都采纳了 Material Design 的设计规范，例如 Google 官方的前端框架 Angular Material 或开源社区的 Material-UI。其中，折叠式组件是 Material Design 中经常出现的一种 UI 控件，本文将以 React 和 Material-UI 为例，分享折叠式组件的使用技巧。
1. 折叠式组件是什么？
折叠式组件是一种可以展开或收起内容的 UI 控件。在 Material Design 中，折叠式组件使用一个「+」或「-」的小图标表示其状态，通常用于展示复杂的数据或内容列表。打开或关闭折叠式组件时，可以使用过渡效果使操作更加流畅。
2. Material-UI 折叠式组件的基本使用
Material-UI 提供了 <Accordion> 和 <ExpansionPanel> 两种折叠式组件。它们的用法非常相似，这里以 <Accordion> 为例介绍。
首先，安装 Material-UI：
npm install @material-ui/core
引入需要的组件：
import React from 'react'; import { Accordion, AccordionSummary, AccordionDetails } from '@material-ui/core'; import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
然后，使用 <Accordion> 组件：
<Accordion> <AccordionSummary expandIcon={<ExpandMoreIcon />}> 标题 </AccordionSummary> <AccordionDetails> 内容 </AccordionDetails> </Accordion>
在上面的代码中，<Accordion> 组件是折叠式组件的最外层容器，用来包裹标题和内容。<AccordionSummary> 组件是标题容器，使用 expandIcon 属性可以设置「+」图标。<AccordionDetails> 组件是内容容器，用于显示折叠内容。
3. 折叠式组件状态管理
经常情况下，折叠式组件不止有一个，而是需要多个组件进行管理。在 Material-UI 中，可以使用 <Accordion> 和 <AccordionSummary> 的 expanded 属性和 onChange 事件来管理组件的状态。
首先，在组件外部定义状态变量和处理状态变化的函数：
const [expanded, setExpanded] = useState(false); const handleChange = (panel) => (event, isExpanded) => { setExpanded(isExpanded ? panel : false); };
然后，在每个组件中添加 expanded 和 onChange：
-- -------------------- ---- ------- ---------- ------------------ --- --------- ---------------------------------- ----------------- --------------------------- --- -------------------------------- --------------------- --- ------------------- ------------------ --- ------------------- ------------ ---------- ------------------ --- --------- ---------------------------------- ----------------- --------------------------- --- -------------------------------- --------------------- --- ------------------- ------------------ --- ------------------- ------------展开代码
在上面的代码中，expanded 属性指定了组件的当前状态，onChange 事件响应组件状态变化的事件。注意，expanded 的值要和 onChange 中的参数一致。
4. 折叠式组件的深度控制
使用多层嵌套的 <Accordion> 组件时，可能会遇到深度过深导致 UI 不美观的问题。Material-UI 中提供了 depth 属性来控制组件的深度，让 UI 更加美观。
在组件外部定义一个变量，表示组件的深度：
const depth = 0;
然后，在每个组件中添加 depth：
-- -------------------- ---- ------- ---------- -------------- ----------------- --------------------------- ---- --- ------------------- ------------------ ---------- ------------ - --- ----------------- --------------------------- ---- --- ------------------- ------------------ --- ------------------- ------------ ------------------- ------------展开代码
在上面的代码中，子组件的 depth 属性要比父组件的 depth 属性加 1，以实现深度控制的效果。
5. 总结
折叠式组件是一种非常常见的 UI 控件，Material-UI 提供了 <Accordion> 和 <ExpansionPanel> 两种组件。在使用多个折叠式组件时，可以使用状态变量和事件处理函数来管理组件的状态。而使用 <Accordion> 组件嵌套的方式时，需要使用 depth 属性来控制组件的深度，让 UI 更加美观。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64563001968c7c53b096ec82
