react - 根据路由生成菜单

后端返回菜单的格式

menuList:[{index: true,name: "",component: "../views/Home",meta: { title: "首页", requiresAuth: true,roles:['user']},},{path: "/admin",name: "admin",meta: { title: "管理页", roles: ["admin"] },children: [{path: "/admin/user",name: "User",component: "@/pages/Admin/User",meta: { title: "用户管理" },children: [{path: "/admin/user",name: "User",component: "@/pages/Admin/User",meta: { title: "用户管理1" },},],},],},],

递归转换 menuList 为 Ant Design Menu 的 items 格式

const convertMenuListToItems = (menuList: any[]): MenuItem[] => {return menuList.map((menu) => {const item: any = {key: menu.path || menu.name, // 使用 path 或 name 作为 keylabel: menu.meta?.title || menu.name, // 显示标题};// 如果有子菜单，递归处理if (menu.children) {item.children = convertMenuListToItems(menu.children);}// 如果是 index 路由，可以标记特殊 key（可选）if (menu.index) {item.key = 'home'; // 强制指定 key，避免重复}return item;});
};const Menu1: React.FC = () => {const { menuList } = useBoundStore()
const items =convertMenuListToItems(menuList)const [current, setCurrent] = useState('mail');const onClick: MenuProps['onClick'] = (e) => {console.log('click ', e);setCurrent(e.key);};return <Menu onClick={onClick} selectedKeys={[current]} mode="horizontal" items={items} style={{display:'flex',justifyContent:'center',alignItems:'center'}}/>;
};export default Menu1;