ant design pro框架动态获取菜单栏icon图标不显示

问题现象

Pro Components
动态获取菜单栏内容，icon图标不显示，依照官方文档操作仍无效果。打印控制台icon字段为underfind

问题分析

🐛[BUG] 从服务端请求菜单时 icon 和 access 不生效 · Issue #8101 · ant-design/ant-design-pro
遍历从服务器端动态获取菜单内容为每一个层级设置icon的时候，
icon 只能用 dom，access 必须要触发页面的重新渲染才有用

解决方案

依据需求，文档代打格式应修改为：

//引入组件
import {  TableOutlined } from '@ant-design/icons';

//为动态菜单设置icon的方法
const loopMenuItem = (menus: any[]): MenuDataItem[] =>
  menus.map(({ icon, routes, ...item }) => ({
    ...item,
    //此处icon用的是dom，不应是字符串，否则不生效
    icon: <TableOutlined />,
    children: routes && loopMenuItem(routes),
  }));
  
  //在menu中的request字段中使用上面的方法传入动态菜单数据并返回
   menu: {
   ...
   //data为动态菜单
   return loopMenuItem(data) || defaultMenuData;
   }