Material UI TypeScript：是否可以向“导航项”添加多级导航菜单？答案

【问题标题】：MaterialUI TypeScript: Is it possible to add multi-level navigation menu to "NavItem"?Material UI TypeScript：是否可以向“导航项”添加多级导航菜单？
【发布时间】：2022-02-16 06:09:38
【问题描述】：

如何使用 MaterialUI 和 TypeScript 创建多级导航菜单？我想在“/问题”中添加以下内容： 2导航菜单：

/问题/标签
/问题/用户

如截图所示

export function NavBar(...) {
  return (
    <>
      <Drawer>
        <List>
            <NavItem
              to="/questions"
              primary="questions"
              icon={CloudOff}
            />
          )}
          <NavItem to="/questions" primary="questions" icon={Window} />
        </List>
      </Drawer>
    </>
  );
}

【问题讨论】：

标签： reactjs typescript material-ui next.js react-material-ui-form-validator

【解决方案1】：

很多可能性...

最好的方法是准备一个包含菜单信息和地图的数组，如下所示：

const TestArea = ({ params }) => {
  const menu = [{ mainMenu: "tata", subMenu: ["toto", "titi"] }];
  return (
    <>
      <Toolbar
        style={{
          display: "flex",
          flexDirection: "column",
          alignItems: "flex-start",
        }}
      >
        {menu.map((item) => {
          return (
            <>
              <Typography variant="overline">{item.mainMenu}</Typography>
              {item.subMenu.map((subItem) => {
                return (
                  <Typography variant="caption" style={{ marginLeft: "40%" }}>
                    {subItem}
                  </Typography>
                );
              })}
            </>
          );
        })}
      </Toolbar>
    </>
  );
};

有了这个基础，您可以使用您选择的组件进行自定义，渲染元素，例如带有指向...的路径的链接

Button color="inherit" component={Link} to="/classic">

是的，我知道，它是纯 JSX 而不是 TSX，这只是举例。如果您需要更多信息，请告诉我！

【讨论】：

非常感谢您的回复