递归实现管理后台权限列表渲染

最新推荐文章于 2024-01-02 17:09:50 发布

原创最新推荐文章于 2024-01-02 17:09:50 发布 · 201 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react

react 专栏收录该内容

12 篇文章

订阅专栏

该博客内容展示了如何使用React实现一个动态权限菜单。通过递归遍历菜单列表，创建了包含子菜单的左侧导航菜单，并能根据当前路由高亮显示选中项。主要涉及的技术包括React组件、路由链接、菜单组件和子菜单的渲染。

权限列表

const menuList = [
  {
    title: "首页", // 菜单标题名称
    key: "/home", // 对应的path
    icon: "home", // 图标名称
    isPublic: true, // 公开的
  },
  {
    title: "商品",
    key: "/products",
    icon: "appstore",
    children: [
      // 子菜单列表
      {
        title: "品类管理",
        key: "/category",
        icon: "bars",
      },
      {
        title: "商品管理",
        key: "/product",
        icon: "tool",
      },
    ],
  },

  {
    title: "用户管理",
    key: "/user",
    icon: "user",
  },
  {
    title: "角色管理",
    key: "/role",
    icon: "safety",
  },

  {
    title: "图形图表",
    key: "/charts",
    icon: "area-chart",
    children: [
      {
        title: "柱形图",
        key: "/charts/bar",
        icon: "bar-chart",
      },
      {
        title: "折线图",
        key: "/charts/line",
        icon: "line-chart",
      },
      {
        title: "饼图",
        key: "/charts/pie",
        icon: "pie-chart",
      },
    ],
  },

  {
    title: "订单管理",
    key: "/order",
    icon: "windows",
  },
];

export default menuList;

递归遍历权限例表

  const getMenunodes = (menuList) => {
    return menuList.map((item) => {
      if (!item.children) {
        return (
          <Menu.Item key={item.key}>
            <Link to={item.key}>
              <Icon type={item.icon} />
              <span>{item.title}</span>
            </Link>
          </Menu.Item>
        );
      } else {
        return (
          <SubMenu
            key={item.key}
            title={
              <span>
                <Icon type={item.type} />
                <span>{item.title}</span>
              </span>
            }
          >
            {getMenunodes(item.children)}
          </SubMenu>
        );
      }
    });
  };

左边菜单栏，高亮显示

  const { pathname } = useLocation();
  console.log(pathname);
  return (
    <div>
      <Menu
        defaultSelectedKeys={[pathname]}
        defaultOpenKeys={["sub1"]}
        mode="inline"
        theme="dark"
      >
        {getMenunodes(menuList)}
      </Menu>
    </div>
  );
}