关于我：明月，从业前端开发，会Java，会前端，会产品，会测试，会大客户销售，有过职业规划经验，欢迎各位私信聊天。目标是创业实现上班自由。梦想明月天涯。
关于社区：笔者创建了【前端架构师】社区，希望各位架构师们能够一起加入，维护起前端技术交流区。
目录
Ant Design Pro 使用系列
前言
一、开发之前先了解知识？
二、使用步骤
1.基础查看
2.代码演示
3.实际操作
前言
哈喽，朋友们好久不见，这两周忙着实际工作的事情，所以没有更新，不知不觉我们已经针对ant design pro的研究已经到了第七章。越来越深入的了解，让我们可能都有点跟不上，但是在此还是希望伙伴们能够沉下心，细心的跟敲，我们把这些代码吃透吃够就行。本章第七章，我们来一起看看 Ant design pro 如何动态加载左侧菜单。
一、开发之前先了解知识？
我们本次使用的是 Ant design pro的admin 模板来进行二次开发的，所以我们在开始之前需要了解熟读自己的代码确定当前我们的使用布局是ant design ui 的 还是 proComponents 的。
因为之前我们在联调后台接口的时候有介绍过基础的结构，所以 我们打开代码 src/app.tsx 就可以明确看到，我们使用的是 layout 这个组件。
而在它的顶部，已经给我们注明了，ProLayout 以及对应文档。所以故而可知，项目使用的是 ProLayout 这个组件。我们打开对应文档继续深入。
二、使用步骤
1.基础查看
我们可以任意的打开一个代码演示来进行查看，这里就留给伙伴们自己学习。而我们直奔本章的要点，如何从服务器加载menu并展示。我们在一进去这个文档的右侧有个菜单。我们可以在菜单上找到我们本章的重点章节。
点击后进行跳转。
跳转后我们会发现，它有两个段落，一个是普通的获取menu，而另一个则是，获取menu后也同时使用icon。也就是页面上菜单前面的小图标。
让我们选择，我们必然选择的是第二种，从服务器加载menu，并且使用icon图标。
2.代码演示
如下，是官方文档的从服务器加载menu，并给它赋值icon的代码。
import { HeartOutlined, SmileOutlined } from '@ant-design/icons';
import type { MenuDataItem } from '@ant-design/pro-components';
import { PageContainer, ProLayout } from '@ant-design/pro-components';
const IconMap = {
smile: <SmileOutlined />,
heart: <HeartOutlined />,
};
const defaultMenus = [
{
path: '/',
name: 'welcome',
icon: 'smile',
routes: [
{
path: '/welcome',
name: 'one',
icon: 'smile',
routes: [
{
path: '/welcome/welcome',
name: 'two',
icon: 'smile',
exact: true,
},
],
},
],
},
{
path: '/demo',
name: 'demo',
icon: 'heart',
},
];
const loopMenuItem = (menus: any[]): MenuDataItem[] =>
menus.map(({ icon, routes, ...item }) => ({
...item,
icon: icon && IconMap[icon as string],
children: routes && loopMenuItem(routes),
}));
export default () => (
<ProLayout
style={{
minHeight: 500,
}}
fixSiderbar
location={{
pathname: '/welcome/welcome',
}}
menu={{ request: async () => loopMenuItem(defaultMenus) }}
>
<PageContainer content="欢迎使用">
<div
style={{
height: '120vh',
minHeight: 600,
}}
>
Hello World
</div>
</PageContainer>
</ProLayout>
);由上面代码我们可以看得出。
1. 我们需要一个Icon的枚举。
2. 我们需要获取router的列表。
3. 我们需要在路由的列表上增加你想展示的icon 字段，并某个可以对应的值。
4. 循环给router列表的每一项赋值实际的icon图标。
那我们下来按照上面的四步进行走一走试试。看能否添加成功呢？
3.实际操作
1. 我们在项目的Layout 方法下 需要增加menu对象，它接收一个参数为request。官方文档是这么解释的。
它是用来在页面初始化的时候，获取后台菜单数据的一个请求方法。并且在这个方法没有返回的时候，它会自动修改loading的状态。
所以在项目中，我们需要定义request这个字段来请求后台的菜单数据。
因为官网的文档上，router的列表直接是定义好的，并且与项目中的结构使用的是一致的，但是在实际情况中，有可能我们后台接口的字段定义是与 antdesignpro的router 需要的字段定义的不一致，所以在这里我们需要增加一步操作，就是转译，将后台字段改为我们前端项目中router能识别出来的字段。
如上我们在获取到后台的菜单数据后，需要将这个菜单数据的字段做以修改处理，改成我们项目的router能识别的字段。
具体方法如上，因为后台也是个无限递归的结构，所以前端也用递归来进行处理。最后将它们继续放置在一个数组中，形成项目可以识别出来的结构。
这一步结束后，不要以为就结束了，大家记得我们还得定义ICON，按照文档的要求，我们首先得定义icon的枚举。
所以我就声明了个对象，这个对象都是一些我自己在antdesign ui中找的一些icon图标。
这时候根据文档，我们需要一个方法，这个方法是循环router列表，我们将对应的router的每一个item的icon 替换成我们上述声明好的IconMap 这个实际的icon。
注意：router中的icon 是我在后台定义好的。每一个icon对应的都是我上面 IconMap 这个对象中的Key。
所以我们的完成的request方法为：
具体的loopMenuItem方法为：
到此我们从服务端动态获取 menu，并且赋值 icon的操作就结束了。
同时我们需要注意的是，params 这个字段
它的意思其实就是，每当我们的用户信息改变时候，都会重新获取一遍后台的菜单数据。
这里大家可以改成初始化时候你们获取数据中的任意一个字段，根据它来判断即可。
而它的使用意义就是，例如：在线切换用户角色后，角色ID变化，则重新获取服务端最新的菜单列表数据。如果你在这里定义的某个值没有变化，则不会去重新触发获取服务端菜单数据的这个接口。
总结
其实经过这七章下来，大家可能有所感触，其实关于ant design pro的使用很简单，仔细阅读文档，我们能够找到大多数的解决方法，如果实在找不到，大家也不要着急，因为antdesign pro 也是基于 antdesign ui 的再次封装行程。实在不行我们就查看它的声明来找其解决的办法即可。
