【Ant Design Pro】使用ant design pro做为你的开发模板（七）如何动态加载菜单列表

2022-10-19 869

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 【Ant Design Pro】使用ant design pro做为你的开发模板（七）如何动态加载菜单列表

前言

哈喽，朋友们好久不见，这两周忙着实际工作的事情，所以没有更新，不知不觉我们已经针对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能识别出来的字段。