如何为Material-UI Drawer添加可折叠嵌套菜单功能

没问题，我来帮你搞定Material-UI Drawer的可折叠嵌套菜单！之前我也遇到过类似需求，用Material-UI自带的组件就能轻松实现，下面是基于你提供的代码改造后的完整方案。

1. 补充必要的组件导入 #

首先需要导入额外的Material-UI组件和图标，用于实现折叠功能：

import React, { useState } from 'react';
import { ListItem, ListItemIcon, ListItemText, Collapse } from '@material-ui/core';
import InboxIcon from '@material-ui/icons/MoveToInbox';
import DraftsIcon from '@material-ui/icons/Drafts';
import StarIcon from '@material-ui/icons/Star';
import SendIcon from '@material-ui/icons/Send';
import MailIcon from '@material-ui/icons/Mail';
import DeleteIcon from '@material-ui/icons/Delete';
import ReportIcon from '@material-ui/icons/Report';
import ExpandLess from '@material-ui/icons/ExpandLess';
import ExpandMore from '@material-ui/icons/ExpandMore';

2. 创建可折叠的父菜单组件 #

我们可以写一个自定义的MailMenu组件，用useState来控制子菜单的展开/收起状态：

export const MailMenu = () => {
  const [open, setOpen] = useState(false);

  const handleClick = () => {
    setOpen(!open);
  };

  return (
    <div>
      <ListItem button onClick={handleClick}>
        <ListItemIcon>
          <MailIcon />
        </ListItemIcon>
        <ListItemText primary="邮件" />
        {open ? <ExpandLess /> : <ExpandMore />}
      </ListItem>
      <Collapse in={open} timeout="auto" unmountOnExit>
        {/* 嵌入你原来的邮件子菜单列表 */}
        <div>
          <ListItem button>
            <ListItemIcon>
              <InboxIcon />
            </ListItemIcon>
            <ListItemText primary="Inbox" />
          </ListItem>
          <ListItem button>
            <ListItemIcon>
              <StarIcon />
            </ListItemIcon>
            <ListItemText primary="Starred" />
          </ListItem>
          <ListItem button>
            <ListItemIcon>
              <SendIcon />
            </ListItemIcon>
            <ListItemText primary="Send mail" />
          </ListItem>
          <ListItem button>
            <ListItemIcon>
              <DraftsIcon />
            </ListItemIcon>
            <ListItemText primary="Drafts" />
          </ListItem>
        </div>
      </Collapse>
    </div>
  );
};

3. 整合到Drawer中 #

现在你可以把这个可折叠菜单和其他菜单一起放到Drawer的List里，示例如下：

import { Drawer, List } from '@material-ui/core';

// 保留你原来的其他邮件菜单定义
export const otherMailFolderListItems = (
  <div>
    <ListItem button>
      <ListItemIcon>
        <DeleteIcon />
      </ListItemIcon>
      <ListItemText primary="Trash" />
    </ListItem>
    <ListItem button>
      <ListItemIcon>
        <ReportIcon />
      </ListItemIcon>
      <ListItemText primary="Spam" />
    </ListItem>
  </div>
);

function AppDrawer() {
  return (
    <Drawer variant="permanent" open>
      <List>
        {/* 可折叠的邮件菜单 */}
        <MailMenu />
        {/* 其他邮件文件夹菜单 */}
        {otherMailFolderListItems}
      </List>
    </Drawer>
  );
}

export default AppDrawer;

关键细节说明 #

• Collapse组件：负责控制子菜单的展开/收起动画，in属性绑定状态open，unmountOnExit可以在收起时卸载子组件，节省页面性能。
• 状态管理：用useState的open状态来切换展开状态，点击父项时触发handleClick反转状态即可。
• 图标反馈：根据open状态显示ExpandLess或ExpandMore图标，让用户直观感知当前菜单的展开状态。

这样改造后，你点击“邮件”菜单就能展开/收起下面的Inbox、Starred等子项，完全实现了层级展开的效果。

内容的提问来源于stack exchange，提问作者ken4ward