ant design pro v5: 动态菜单渲染以及图标渲染

Pro v5目前依然是beta版本，但是老夫在俩个月前已经迫不及待的上手搞了搞，有关v5对比之前版本有哪些改变，可以说，增加了很多Pro组件，并且ProComponents一直在更新迭代；同时优化了umi-request等很多，具体可以查看官方文档

从服务端请求菜单
在某些情况下，写死的菜单数据可能满足不了我们的需求，Pro 也提供了相应的解决方案来进行远程的菜单数据请求。这里我们需要用到两个 API 来配置完成。menuDataRender 可以自定义数据格式， menu.loading 可以让 menu 展示为一个 loading 的状态。

具体的代码实现如下，我们可以在 src/app.tsx 定义 layout 对象，并且导出。

export const layout = async ({
  initialState,
}: {
  initialState: {
    settings?: LayoutSettings;
    menuData: Promise<BasicLayoutProps>;
    currentUser?: API.CurrentUser;
  };
}): BasicLayoutProps => {
  return {
    menuDataRender: (menuData) => initialState.menuData || menuData,
    ...initialState?.settings,
  };
};

这样我们就可以通过== initialState== 来完成菜单的更新工作了，我们需要在 src/app.tsx 中写入如下代码：

export async function getInitialState(): Promise<{
  settings?: LayoutSettings;
  menuData: MenuDataItem[];
}> {
  // 如果是登录页面，不执行
  if (history.location.pathname !== '/user/login') {
    const currentUser = await queryMenuData();
    return {
      menuData,
      settings: defaultSettings,
    };
  }
  return {
    menuData: [],
    settings: defaultSettings,
  };
}

实现完成之后，菜单上会出现类似FundProjectionScreenOutlined菜单管理字样，这个时候需要引入ant的icons，之后进行配置
(此方法会引入ant的所有icon，从而会导致包变大，知悉)

import * as iconMap from '@ant-design/icons';

return {
 name: lists.name,
 icon: lists.icon === null || lists.icon === 'table' ? '' : React.createElement(iconMap[lists.icon]),
 path: lists.router,
 component: lists.viewPath,
}