ant-design-pro动态加载menu菜单

官方文档 :菜单的高级用法 – Ant Design Pro

我这边使用的是 Ant Design Pro 6.0.beta.1
看使用方法和 v5 版本是一样的,用法也很简单。

Pro 中默认会读取 config/config.tsx 中的 routes 配置作为 ProLayout 的菜单数据来生成菜单,也就是我们经常使用的 routes 文件。

以下为官网摘录

从服务端请求菜单

服务端获取的菜单重定向不生效且 icon 不会自动转化。重定向需要配置在路由中才会生效。 icon 需要手工映射见下方手工映射本地枚举示例

在某些情况下,写死的菜单数据可能满足不了我们的需求,Pro 也提供了相应的解决方案来进行远程的菜单数据请求。我们这里需要用到两个 API, menu.request 和 menu.params,request 需要传入一个 promise,它会自动托管 loading,params 修改会触发 request 方便重新请求菜单。

具体的代码实现如下,我们可以在 src/app.tsx 定义 layout 对象,并且导出。看起来可能是这样的:

// https://umijs.org/zh-CN/plugins/plugin-layout
export const layout: RunTimeLayoutConfig = ({ initialState }) => {
  return {
    menu: {
      // 每当 initialState?.currentUser?.userid 发生修改时重新执行 request
      params: {
        userId: initialState?.currentUser?.userid,
      },
      request: async (params, defaultMenuData) => {
        // initialState.currentUser 中包含了所有用户信息
        const menuData = await fetchMenuData();
        return menuData;
      },
    },
  };
};

注意点

  • 后端返回的路径仅用作展示,文件中 routes 该配置的仍然需要配置
  • 后端返回的菜单名称无作用,菜单名称仍然需要在 locale 中设置
  • 后端返回的菜单图标不会直接渲染,需要前端单独做适配

关于菜单图标渲染问题

方案一、手工映射本地枚举

从服务器加载 menu 数据后并使用 icon 渲染,针对后端数据 icon 菜单图标不显示问题

import {
  BookOutlined,
  LinkOutlined,
  AppstoreOutlined,
  SmileOutlined,
  TableOutlined,
  SoundOutlined,
  CrownOutlined,
} from '@ant-design/icons';

// 利用对象进行图标映射
const iconMapping = {
  AppstoreOutlined: <AppstoreOutlined />,
  SmileOutlined: <SmileOutlined />,
  TableOutlined: <TableOutlined />,
  SoundOutlined: <SoundOutlined />,
  CrownOutlined: <CrownOutlined />
}


menu: {  
  // 每当 initialState?.currentUser?.userid 发生修改时重新执行 request  params: {  
    userId: initialState?.currentUser?.userid,  
  },  
  request: async (params: any) => {  
    const menuData = await fetchMenuData();
    menuData?.forEach(  
        (item: any) =>  
          (item.icon = iconMapping[item.icon] ? iconMapping[item.icon] : item.icon),  
      );  
    return menuData;  
  },  
},

方案二、使用 menuDataRender 来重新渲染

官方介绍:ProLayout – 高级布局 – ProComponents (ant.design)

从服务器获取
有些时候我们希望服务器来管理我们的路由,所以希望菜单时服务器进行分发的数据。我们提供了 menuDataRender 来进行修改数据,但是要注意 menuDataRender 会触发重新渲染,并且还会支持的国际化和权限的配置,如果你不需要国际化,建议使用 postMenuData 可以显著的提升性能。

服务器需要返回的数据与 MenuDataItem 相同,menuDataRender 需要返回一个数组,如果你想拥有更好的性能可以试试使用 props 中的 route 属性,这里有个 demo

这一块官方介绍比较简单,我也没有深入研究,之后有时间可以试一试。附介绍文档 Pro 的 Layout 组件 – Ant Design Pro

最后想吐槽下,AntDesign 系列的文档感觉有点混乱,我不得不通过搜索引擎来查找关键字😓

Author: obsidian

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注