Ant Design Pro 4@动态菜单icon丢失解决办法

Antd 升级的4.0 版本以后也对icon的生成方式做了修改

image

官方给了相应的插件修复这问题

image

这种插件的方式在config.ts中配置的静态菜单是没问题的,但如果是后台传入的动态菜单这种方式并没有效果.调试发现 umi-plugin-antd-icon-config只在初始化的时候运行一次,为了解决动态菜单的icon加载问题,决定从插件入手,把核心代码写到 BasicLayout.

** 1:引入icon**

import allIcons from '@@/plugin-antd-icon/icons';

** 2:菜单数据处理函数**

const toHump = (name: string) =>
  name.replace(/-(\w)/g, (all: string, letter: any) => letter.toUpperCase());
const formatter = (data: any[]) => {
  data.forEach(item => {
    if (item.icon) {
      const { icon } = item;
      const v4IconName = toHump(icon.replace(icon[0], icon[0].toUpperCase()));
      const NewIcon = allIcons[icon] || allIcons[''.concat(v4IconName, 'Outlined')];
      if (NewIcon) {
        try {
          // eslint-disable-next-line no-param-reassign
          item.icon = React.createElement(NewIcon);
        } catch (error) {
          console.log(error);
        }
      }
    }
​
    if (item.routes || item.children) {
      const children = formatter(item.routes || item.children); // Reduce memory usage
​
      item.children = children;
    }
  });
  return data;
};

​

3:获取菜单数据

const [menuData, setMenuData] = useState([]);
  useEffect(() => {
   
​
    getMenuList().then(data => {
      setMenuData(formatter(data || []));
    });
  }, []);

4:更新数据到menuDataRender

menuDataRender={menuData}

5:菜单数据样例

let data=[
      {
        path: "/account",
        name: "账户管理",
        icon: "user",
        children: [
          {
            path: '/account/employee',
            name: '员工管理',
          },
          {
            path: '/account/employee/create',
            name: '新增员工',
            component: './account/employee/create',
          },
          {
            path: '/account/position',
            name: '职位设置',
          },
          {
            path: '/account/position/create/:id',
            name: '新增职位',
          },
        ]
      },
  ]

动态菜单图标显示问题问题完美解决

更多问题请参见 迁移 antd@4 指南 https://pro.ant.design/blog/antd-4.0-cn