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

参考内容:ant5中,menu组件动态渲染icon问题

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/813268.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C++力扣Leetcode算法5--搜索

1.深度优先遍历&#xff08;depth-first-search&#xff09;&#xff0c;遇到新节点就遍历下去。因此遍历需要用先入后出的栈来实现&#xff0c;也可以通过与栈等价的递归来实现。 深度优先搜索也可以用来检测环路&#xff1a;记录每个遍历过的节点的父节点&#xff0c;若一个节…

计算机组成原理【CO】Ch2 数据的表示和应用

文章目录 大纲2.1 数制与编码2.2 运算方法和运算电路2.3 浮点数的表示和运算 【※】带标志加法器OFSFZFCF计算机怎么区分有符号数无符号数? 【※】存储排列和数据类型转换数据类型大小数据类型转换 进位计数制进制转换2的次幂 各种码的基本特性无符号整数的表示和运算带符号整…

微信小程序Skyline模式下瀑布长列表优化成虚拟列表,解决内存问题

微信小程序长列表&#xff0c;渲染的越多就会导致内存吃的越多。特别是长列表的图片组件和广告组件。 为了解决内存问题&#xff0c;所以看了很多人的资料&#xff0c;都不太符合通用的解决方式&#xff0c;很多需要固定子组件高度&#xff0c;但是瀑布流是无法固定的&#xf…

推荐一款轻量级的hosts文件编辑器(免安装版)

在管理和编辑hosts文件时&#xff0c;一款简单而有效的工具是非常重要的。下面推荐一款免安装版的轻量级hosts文件编辑器&#xff0c;让你轻松管理你的hosts文件。 windows系统默认hosts文件位置 下载地址&#xff1a;https://www.alipan.com/s/8kSns9eAi9f

CSS aspect-ratio属性设置元素宽高比

aspect-ratio 是CSS的一个属性&#xff0c;用于设置元素的期望宽高比。它设置确保元素保持特定的比例&#xff0c;不受其内容或容器大小的影响。 语法&#xff1a; aspect-ratio: <ratio>;其中 <ratio> 是一个由斜杠&#xff08;/&#xff09;分隔的两个数字&…

代码随想录第39天 | 62.不同路径 、 63. 不同路径 II

一、前言 参考文献&#xff1a;代码随想录 今天主要的题目是动态规划的路径问题&#xff0c;动态规划五要点&#xff1b; 1、确定dp数组&#xff0c;dp[i]代表什么i代表什么&#xff1b; 2、递推公式&#xff1b; 3、初始化dp数组&#xff1b; 4、遍历顺序&#xff1b; …

Linux常用命令介绍

Linux ### 常用命令&#xff1a; 1、ls命令&#xff1a; 显示当前目录下文件和文件夹。 举例&#xff1a;在用户目录&#xff08;root&#xff09;使用ls可以查看用户里的文件及文件夹。 -l可以详细看列出文件及文件夹, ll命令等价与ls - l 2、cd命令 作用是切换目录。 …

uniapp APP真机调试接口请求不到服务器解决方法

项目场景&#xff1a; 在使用Hbuilder开发uniapp的过程中&#xff0c;出现了两个在 Chrome 调试中正常&#xff0c;但打包后异常的问题&#xff0c;特此记录。 问题描述 在 H5 端请求接口正常请求。 App 端 请求接口&#xff0c;提示 "{"errMsg":"reque…

百万成神-转自九边pro 的分享

1&#xff0c;如果一个人写代码写到10万行左右&#xff0c;也会出现下笔如有神的效果&#xff0c;很多时候自己都不知道自己怎么会想出这么复杂的套路和算法来。 2&#xff0c;我问过那个作者&#xff0c;他是怎么想到的&#xff0c;他说他也不知道&#xff0c;反正每天都写&am…

R语言数据可视化:基本绘图系统

目录 plot函数 par函数 hist函数 boxplot函数 plot函数应用实战 全局参数 R语言中有三大绘图系统包括基本绘图系统&#xff0c;Lattice绘图系统&#xff0c;ggplot2绘图系统 基本绘图系统 在R语言中&#xff0c;以下函数通常用于创建和定制图形&#xff1a; plot 函数…

网络通信三要素:IP、端口和协议

IP&#xff1a;设备在网络中的地址&#xff0c;是唯一的标识 IP&#xff1a;全程”互联网协议地址“&#xff0c;是分配给上网设备的唯一标志 IP地址有两种形式&#xff1a; IPv4&#xff1a;32位 IPv6&#xff1a;共128位。分成8段表示&#xff0c;每取四位编码成一个16进制…

分布式技术---------------消息队列中间件之 Kafka

目录 一、Kafka 概述 1.1为什么需要消息队列&#xff08;MQ&#xff09; 1.2使用消息队列的好处 1.2.1解耦 1.2.2可恢复性 1.2.3缓冲 1.2.4灵活性 & 峰值处理能力 1.2.5异步通信 1.3消息队列的两种模式 1.3.1点对点模式&#xff08;一对一&#xff0c;消费者主动…

【御控物联】 1、物联网介绍

文章目录 一、定义二、起源三、发展四、应用五、未来六、技术资料 一、定义 如何理解物联网&#xff0c;我们引用百度百科的一句话“把所有物品通过信息传感设备与互联网连接起来&#xff0c;进行信息交换&#xff0c;即物物相息&#xff0c;以实现智能化识别和管理”&#xf…

【数据结构】AVL树

AVL树 AVL树&#xff08;Adelson-Velsky和Landis树&#xff09;是一种自平衡二叉搜索树。它通过维护树的高度平衡来确保树的操作复杂度为O(log n)。它通过在每个节点上跟踪平衡因子来保持树的平衡。平衡因子是左子树和右子树高度之间的差值。 AVL树的特性 每个节点都有一个平…

机器学习——模型评价

概述 在机器学习中&#xff0c;模型评价是评估和比较不同模型性能的关键步骤之一。它是通过对模型的预测结果与真实标签进行比较&#xff0c;从而量化模型的预测能力、泛化能力和稳定性。模型评价旨在选择最佳的模型&#xff0c;理解模型的行为&#xff0c;并为模型的改进提供…

Synchronized简述

1.了解Synchrozied Synchrozied是一种悲观锁&#xff0c;通过Synchroized实现同步机制&#xff0c;在操作数据时&#xff0c;判断该对象是否被锁定&#xff0c;如果被锁定则进入阻塞状态直到被占用的线程释放&#xff0c;如果没有被锁或者当前线程已经存在操作对象的锁则进行上…

大模型(LLM)与人类大脑的结构及运行机制的关系

大模型&#xff08;LLM&#xff0c;Large Language Model&#xff09;与人类大脑的结构及运行机制之间存在一些有趣的类比和潜在的关联&#xff0c;尽管两者在本质和实现方式上存在显著差异。 首先&#xff0c;从结构上来看&#xff0c;人类大脑是一个高度复杂和互联的网络&am…

SpringBoo利用 MDC 机制过滤出单次请求相关的日志

&#x1f3f7;️个人主页&#xff1a;牵着猫散步的鼠鼠 &#x1f3f7;️系列专栏&#xff1a;Java全栈-专栏 &#x1f3f7;️个人学习笔记&#xff0c;若有缺误&#xff0c;欢迎评论区指正 目录 1.前言 2.MDC 是什么 3.代码实战 4.总结 1.前言 在服务出现故障时&#xff…

springboot @ConditionalOnProperty注解

ConditionalOnProperty注解可以有条件的加载bean 比如有3个定时任务&#xff0c;想设置开关 1、配置中添加 config:schedule:enabled:aaaScheduler: truebbbScheduler: truecccScheduler: true 2、代码 Component ConditionalOnProperty(prefix "config.schedule.en…

【功能更新】强化知识库管理与AI问答机器人性能

三月HelpLook带来了3大类功能焕新&#xff0c;主要聚焦于&#xff1a;知识库的管理功能升级和AI问答机器人的优化&#xff0c;让我们看看更新了哪些新功能&#xff01; 那么&#xff0c;接下来就让我们来详细了解一下本次升级都带来了哪些新功能吧&#xff01; 知识库使用与管理…