最近在开发人事管理系统，其中菜单是需要动态渲染，针对不同角色授权不同的菜单权限。
路由由后端返回，格式如下：
[ { "path": "/", "name": "dashboard", "icon": "DesktopOutlined", "component": "./dashboard/workplace", }, { "name": "management", "path": "/auth", "icon": "TeamOutlined", "children": [ { "name": "username", "path": "/auth/user", "component": "./auth/user", "hideInMenu": false }, { "name": "role", "path": "/auth/role", "component": "./auth/role", "hideInMenu": false }, { "name": "permission", "path": "/auth/permission", "component": "./auth/permission", "hideInMenu": false } ] }, { "name": "organization", "path": "/organization", "icon": "ApartmentOutlined", "children": [ { "name": "department", "path": "/organization/department", "component": "./organization/department", "hideInMenu": false }, { "name": "position", "path": "/organization/position", "component": "./organization/position", "hideInMenu": false } ] }, { "name": "staff", "path": "/staff", "icon": "UserOutlined", "children": [ { "name": "roster", "path": "/staff/roster", "component": "./staff/roster", "hideInMenu": false } ] } ]
菜单可以正常生成，然而icon图标缺失...
网上度娘了一下，也没找到比较满意的解决方案，回到官网看了在看了文档https://v4-pro.ant.design/docs/router-and-nav-cn
这种插件的方式在config.ts中配置的静态菜单是没问题的,但如果是后台传入的动态菜单这种方式并没有效果.调试发现 umi-plugin-antd-icon-config只在初始化的时候运行一次,为了解决动态菜单的icon加载问题,决定从插件入手,把核心代码写到 BasicLayout.
在BasicLayout 引入
import allIcons from '@@/plugin-antd-icon/icons';
菜单函数处理
//解决图标问题
//consttoHump=(name)=>name.replace(/-(\w)/g,(all,letter)=>letter.toUpperCase());
constmenuDataRender=(menuList)=>
menuList.map((item)=>{
if(item.icon){
const{icon}=item;
//constv4IconName=toHump(icon.replace(icon[0],icon[0].toUpperCase()));
constNewIcon=allIcons[icon];
if(NewIcon){
try{
//eslint-disable-next-lineno-param-reassign
item.icon=React.createElement(NewIcon);
}catch(error){
console.log(error);
}
}
}
保存就解决了icon图标问题
