官方文档 :菜单的高级用法 – 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 系列的文档感觉有点混乱,我不得不通过搜索引擎来查找关键字😓