Ant Design Pro V4.5 从服务器请求菜单图标不显示解决

Posted 2021-09-01 Mango·

如果发现只有菜单，没有图标，只需要在models下的menu.ts中天下如下内容

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

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;
};

然后再函数返回前调用上面的函数，就可以了，是不是很简单 

//这里做了个转换，可能服务端返回的接口格式和前端的路由格式并不一致，可以在这个方法里进行调整，这里的方法仅作参考，根据自己实际情况进行调整即可
const menuFormatter = (response: any) => {

    if (response === null)
    {
        console.log("response === null");
        return [];
    }
    else if(response === undefined)
    {
        console.log("response === undefined");
        return [];
    }
    return formatter(response);
}