时间戳

首页 > 解决方案 > 我是 reactjs 和材料 ui 的新手，我想在导航栏中创建一个下拉菜单

reactjs - 我是 reactjs 和材料 ui 的新手，我想在导航栏中创建一个下拉菜单

问题描述

以下是我的代码

我想在导航栏上的 UI 元素和表格上放置一个下拉菜单，但无法做到这一点

我当前的输出

理想输出

LayoutMain.js

          {links.map(({ icon: Icon, ...link }, index) => (
            <ListItem
              button
              key={link.name}
              onClick={() => gotoRoute(link.route)}
              selected={link.route === location.pathname}
            >
              <ListItemIcon>
                <Icon />
              </ListItemIcon>
              <ListItemText primary={link.name} />
            </ListItem>
          ))}
        </List>

链接.js


export const links = [
  {
    name: 'Dashboard',
    icon: Dashboard,
    route: '/',

  },
  {
    name: 'UI Elements',
    icon: ListAlt,
    route: '/UIElements',
  },
  {
    name: 'General',
    icon: RadioButtonUnchecked,
    route: '/General',

  },
  {
    name: 'Tables',
    icon: TableChart,
    route: '/Tables'
  }
];

标签： reactjsmaterial-ui

解决方案

一种方法是使用 MUI 中的 Accordion 组件

{links.map(({ icon: Icon, ...link }, index) => {
   if (link.name !== 'UI Elements') {
     return 
       <ListItem
         button
         key={link.name}
         onClick={() => gotoRoute(link.route)}
         selected={link.route === location.pathname}
       >
       <ListItemIcon>
         <Icon />
       </ListItemIcon>
       <ListItemText primary={link.name} />
      </ListItem>
   } else return
     <Accordion>
        <AccordionSummary
          expandIcon={<ExpandMoreIcon />}
          aria-controls="panel1a-content"
          id="panel1a-header"
        >
          <Typography>{link.name}</Typography>
        </AccordionSummary>
        <AccordionDetails>
          {uiElements.map((uiElement) => (
            <ListItem>
             <ListItemIcon>
              <Icon />
             </ListItemIcon>
             <ListItemText primary={link.name} />
            </ListItem>
          )}
        </AccordionDetails>
      </Accordion>
 })}
</List>

您需要在 uiElements 对象中使用另一个 uiElements 数组来映射附加信息。

推荐阅读