react17+antd4 动态渲染导航菜单中的icon

本文主要是介绍react17+antd4 动态渲染导航菜单中的icon，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

在路由信息对照表中的icon可以有两种形式：一种是组件形式，一种是字符串形式的。
在antd4的Menu.Item和SubMenu中的icon属性的格式为：
在这里插入图片描述

1.组件形式

这种方法在渲染时很方便，与antd中的Menu.Item中的icon属性的形式是一致的，可以直接进行渲染。

路由信息对照表：

//路由信息对照表
import {HomeOutlined,UserOutlined,UsergroupAddOutlined} from '@ant-design/icons'
export const asyncRouterMap = [{path: '/home',name: 'Home',meta: { title: '首页', role: ['admin', 'teacher', 'manager'],icon:<HomeOutlined />}}, {path: '/personal',name: "Personal",meta: { title: '个人中心', role: ['admin', 'teacher', 'manager'],icon:<UserOutlined />}}, {path: '/teacher',name: "Teacher",meta: { title: '教师管理', role: ['admin'],icon:<UsergroupAddOutlined /> }}, 
}

菜单渲染：

   //菜单渲染renderMenu = (data) => {return data.map((item) => {if (item.children) {return <SubMenu key={item.path} title={item.meta.title} icon={item.meta.icon}>{this.renderMenu(item.children)}</SubMenu>}else{return <Menu.Item key={item.path} icon={icon}><NavLink to={'/index' + item.path}>{item.meta.icon}</NavLink></Menu.Item>}})}

2.字符串形式

在项目中很多时候传入的icon都是字符串类型的，与antd的Menu.Item和SubMenu的icon属性不一致，需要使用React.createElement将其转换为reactNode类型的。

import * as Icon from "@ant-design/icons" //引入*以满足动态渲染
... ...
list.map(item=>{item.icon = React.createElement(Icons[item.icon])
})

路由信息对照表：

export const asyncRouterMap = [{path: '/home',name: 'Home',meta: { title: '首页', role: ['admin', 'teacher', 'manager'],icon:'HomeOutlined'}}, {path: '/personal',name: "Personal",meta: { title: '个人中心', role: ['admin', 'teacher', 'manager'],icon:'UserOutlined'}}, {path: '/teacher',name: "Teacher",meta: { title: '教师管理', role: ['admin'],icon:'UsergroupAddOutlined' }}, 
}

菜单渲染：

	import * as Icons from '@ant-design/icons'  //引入*以满足动态渲染renderMenu = (data) => {return data.map((item) => {const icon=React.createElement(Icons[item.meta.icon],{style:{fontSize:'20px'}}) //创建元素if (item.children) {return <SubMenu key={item.path} title={item.meta.title} icon={icon}>{this.renderMenu(item.children)}</SubMenu>}else{return <Menu.Item key={item.path} icon={icon}><NavLink to={'/index' + item.path}>{item.meta.title}</NavLink></Menu.Item>}})}