antd菜单使用动态图标

antd的MenuItem的icon属性值是一个ReactNode类型值，如果我们项目的菜单比较少，且是静态配置的话，倒还好，简单配置一下就好了，可大多数情况都不是简单的几个固定的菜单，而是从接口下发的带有权限菜单，那么这个时候就就麻烦了。

因为正常情况下，接口下发的菜单数据大概的数据结构应该类似：

[{"id": 1,"path": "/orderList","text": "订单列表","icon": "BarChartOutlined"},{"id": 2,"path": "/report","text": "商品管理","icon": "CameraOutlined"}
]

我们直接获取到的icon字段是一个字符串类型的，显然不符合antd中Menu.Item中icon属性值的类型要求，那怎么办呢？

既然icon属性需要一个ReactNode类型，那么我们就创建一个ReactNode类型吧.

// 创建icon图标元素
const iconToElement = (name: string) =>React.createElement(Icon && (Icon as any)[name], {style: { fontSize: '16px' }})

这样，我们就可以在Menu.Item中去使用了：

<Menu.Item key={item.path} icon={item.icon ? iconToElement(item.icon) : ""}><Link to={item.path}>{item.text}</Link>
</Menu.Item>

当然了，我们在使用图标之前，需要先把图标库引入进来(假设我们使用的就是antd的默认图标库):

import * as Icon from "@ant-design/icons";

这样，就具有正常的使用接口下发的指定的icon了。

为了方便理解，贴一个整个的代码吧，有些代码是测试的，没有清理，凑合看下吧：

import React, { FC, useEffect, useState } from 'react';
import { Layout, Menu } from "antd";
import * as Icon from "@ant-design/icons";
const { Header, Content, Footer, Sider } = Layout;
const { SubMenu } = Menu;
import request from 'umi-request';
import logo from "../../assets/images/logo.png";
import style from "./less/layout2.less";
import { Link } from 'umi';const MainLayout: FC = (props) => {const [menu, setMenu] = useState([]);const [defaultOpenKey, setDefaultOpenKey] = useState([]);const getMenu = () => {request.get("http://localhost:3000/menu").then(function (res) {setDefaultOpenKey(res.defaultOpenKey);setMenu(res.data);}).catch(err => {console.log(err);})}useEffect(() => {getMenu();}, []);// 创建icon图标元素const iconToElement = (name: string) =>React.createElement(Icon && (Icon as any)[name], {style: { fontSize: '16px' }})return <div><Layout><Header className={style.header}><div className={style.logo}><img src={logo} alt="logo" /></div></Header><Layout><Sider width={200} className="site-layout-background" theme="light"><Menu mode='inline' defaultSelectedKeys={defaultOpenKey} defaultOpenKeys={defaultOpenKey} theme="light">{menu.map((item: any) => {if (item.children && item.children.length > 0) {return <SubMenu key={item.path} title={item.text} icon={item.icon ? iconToElement(item.icon) : ""}>{item.children.map((citem: any) => {return <Menu.Item key={citem.path} icon={citem.icon ? iconToElement(citem.icon) : ""}><Link to={citem.path}>{citem.text}</Link></Menu.Item>})}</SubMenu>} else {return (<Menu.Item key={item.path} icon={item.icon ? iconToElement(item.icon) : ""}><Link to={item.path}>{item.text}</Link></Menu.Item>)}})}</Menu></Sider><Layout className={style.maincontentWraper}><Content className={style.maincontent} style={{ minHeight: '90vh' }}>{props.children}</Content></Layout></Layout></Layout></div>
}export default MainLayout;

antd菜单使用动态图标相关推荐

Vue3实现动态菜单展示，实现动态图标展示，实现跳转到一个新页面
1.定义组件在components里面添加Menu.vue import { createRouter, createWebHashHistory } from "vue-router&qu ...
android e图标一会有一会没有反应,android解决菜单Menu添加Icon无效问题，让菜单同时显示图标和文字...
今天主要解决在Android 4.0 以上的系统中,在java代码中给菜单Menu动态添加Icon无效问题.本人通过尝试网上给出的涉及到菜单的源码类 MenuBuilder通过反射更改mOptiona ...
Vue 权限菜单（动态路由）详解
今天记录一下Vue的权限菜单(动态路由),在我们写后台的时候用的比较多,Vue的权限菜单分两种,一种是通过本地进行,根据账号的权限进行筛选出可用的权限,组合菜单并在页面上渲染显示,另一种是根据登录的账 ...
Vue3 Element Plus 动态图标
Vue3 Element Plus 动态图标 Element Plus 中的图标以组件的形式来使用,而在基于Vue 2.x的Element UI中图标是字符串的形式,这样就导致过去的一些使用习惯不得不 ...
东京奥运会73枚动态图标刷爆朋友圈，中国网友怒赞：不愧是设计大国！
本文转载自公众号"日本设计小站"(ID:japandesign),已获得其授权. 前不久,东京奥组委.残奥组委公布了73个奥运比赛项目的动态图标视觉效果堪称惊艳! 图标先以碎片 ...
html动态图标代码,SVG动态图标是如何实现的
这篇文章给大家分享的内容是SVG动态图标是如何实现的,有需要的朋友可以参考一下. 在 loading.io 上能看到好多效果惊艳的loading图标.它们都是用svg写成的,寥寥几行代码,比img图片 ...
酷炫的SVG 动态图标
酷炫的SVG 动态图标在 loading.io 上能看到好多效果惊艳的loading图标.它们都 ...
VB在菜单上增加图标
'声明: Declare Function GetMenu Lib "user32" (ByVal hwnd As Long) As Long Declare Function G ...
android 时钟动态图标,Android 8.1 Launcher3实现动态指针时钟功能
本文主要实现功能,可能有不合理的地方首先创建一个实现功能的工具里,直接上代码: import android.content.Context; import android.graphics.Bit ...

antd菜单使用动态图标

antd菜单使用动态图标相关推荐

最新文章

热门文章