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

Yjing景

已于 2024-04-09 17:58:17 修改

阅读量546

点赞数 2

分类专栏： React 文章标签： react antd

于 2024-04-09 17:53:27 首次发布

本文链接：https://blog.csdn.net/weixin_45871977/article/details/137560389

版权

React 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

在路由信息对照表中的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>
            }
        })
    }