antd design pro v4动态加载菜单，解决icon丢失问题

antd design pro v4动态加载菜单，解决icon丢失问题

##antd design pro v4动态加载菜单，解决icon丢失问题

前言

做后台管理系统都会有需求要做菜单管理，权限设置的功能，最近用antd design pro v4做菜单动态加载，加载了菜单icon却显示英文，搜了好多资料都没有全面的，特来总结一下

---

一、解决问题

1. antd design pro如何动态加载菜单；
2. 动态加载菜单icon丢失（只显示英文怎么办）？

二、使用步骤

1.动态加载菜单

官方给出的方法是下面这样的：

1. 先在 src/layouts/BasicLayout.jsx中的useEffect中请求到菜单数据，注意一下，加载的菜单数据是有要求的，如官方要求的返回的格式是没有icon的，所以没有icon显示问题；
2. 在BasicLayout.jsx 最下方 return (
   <ProLayout
   // …
   menuDataRender={() => menuData}
   // …
   />
   );
   将获取到的菜单数据放进menuDataRender中，注：menuDataRender好像只会触发一次，所以请求数据的时候需要异步加载，并对数据进行判断是否有值；

2.动态加载菜单Icon丢失问题

因为有需求要显示icon，所以我后台返回的数据是这样的：
{
path: ‘/welcome’,
name: ‘welcome’,
icon: ‘SmileOutlined’,
component: ‘./welcome’,
}，
返回这样的数据发现icon不能够渲染出来，显示的icon是英文，查找了好多资料发现需要对数据进行特别处理，下面分享下我的处理过程：
** 1:引入icon**

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

2：通过接口获取菜单数据。

const [menuData, setMenuData] = useState([]);

useEffect(async () => {
    const StorageUser = JSON.parse(sessionStorage.getItem('StorageUser'));
    if (StorageUser) {
      StorageUser && await request('/api/user/userMenuList?id=' + StorageUser.userId, {
        method: 'GET',
      }
      ).then((res) => {
        if (res.resultCode === '0') {
          setMenuData(formatter(res.data[0].routes[0].routes) || [])
        } else if (res.resultCode === '110') {
          message.warning('请先进行登录！');
          sessionStorage.removeItem("StorageUser");
          if (window.location.pathname !== '/user/login') {
            history.replace({
              pathname: '/user/login',
            });
          }
        }
      })
    }
    })

3：处理返回的菜单数据。

const toHump = (name) =>
    name.replace(/-(\w)/g, (all, letter) => letter.toUpperCase());
  const formatter = (data) => {
    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;
  };

4：将处理的菜单数据放入menuDataRender中。

return (
    <ProLayout
     //...
      menuDataRender={()=>menuData}
     /////
    >
      <Authorized authority={authorized.authority} noMatch={noMatch}>
        {children}
      </Authorized>
    </ProLayout>

---