reactjs - MaterialUI TypeScript：是否可以向“NavItem”添加多级导航菜单？

Question

如何使用 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>
    </>
  );
}

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

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

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

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