Material UI TypeScript：是否可以将多级导航菜单添加到 "NavItem"？

Question

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

• /questions/Tags
• /questions/Users

和截图一样

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

Answer 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>
    </>
  );
};

有了这个基础，您可以使用您选择的组件进行自定义，呈现 link 之类的元素，路径为...

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

是的，我知道，它是普通的 JSX 而不是 TSX，它只是一个例子。 如果您需要更多信息，请告诉我！