后端传递的图标是字符串形式的 Ant Design 图标组件怎么避免被解析为普通文本

问题描述

后端传递导航,数据格式带了icon。如下

javascript 复制代码
const superNav = [
            {
              key: '1',
              icon: '<AppstoreOutlined />',
              title: '控制台',
              link: '/console',
            },
            {
              key: '2',
              icon: '<UserOutlined />',
              title: '账号管理',
              children: [
                {
                  key: 'sun1',
                  title: '权限管理',
                  link: '/account/permission',
                },
                {
                  key: 'sun3',
                  title: '用户管理',
                  link: '/account/role',
                },
              ],
            },
        ];

不做处理渲染的话结果如下

解决方案

导入需要的antd组件,在拿到后端数据后把原本的icon字符串替换为antd对应的icon组件

javascript 复制代码
import {
  UserOutlined,
  SecurityScanOutlined,
  IdcardOutlined,
  AppstoreOutlined,
} from '@ant-design/icons';

//省略

  const getNavList = ()=>{
      let navList = navData.filter((item,index)=>{
          if(item.icon=='<AppstoreOutlined />'){
            item.icon = <AppstoreOutlined />
          }else if(item.icon=='<SecurityScanOutlined />'){
            item.icon = <SecurityScanOutlined />
          }else if(item.icon=='<IdcardOutlined />'){
            item.icon = <IdcardOutlined />
          }else if(item.icon=='<UserOutlined />'){
            item.icon = <UserOutlined />
          }
          return item
      })
      setMenuData(navList)
  }
相关推荐
10年前端老司机25 分钟前
React无限级菜单:一个项目带你突破技术瓶颈
前端·javascript·react.js
阿芯爱编程5 小时前
2025前端面试题
前端·面试
前端小趴菜056 小时前
React - createPortal
前端·vue.js·react.js
晓13136 小时前
JavaScript加强篇——第四章 日期对象与DOM节点(基础)
开发语言·前端·javascript
菜包eo6 小时前
如何设置直播间的观看门槛,让直播间安全有效地运行?
前端·安全·音视频
烛阴7 小时前
JavaScript函数参数完全指南:从基础到高级技巧,一网打尽!
前端·javascript
chao_7898 小时前
frame 与新窗口切换操作【selenium 】
前端·javascript·css·selenium·测试工具·自动化·html
天蓝色的鱼鱼8 小时前
从零实现浏览器摄像头控制与视频录制:基于原生 JavaScript 的完整指南
前端·javascript
三原8 小时前
7000块帮朋友做了2个小程序加一个后台管理系统,值不值?
前端·vue.js·微信小程序
popoxf9 小时前
在新版本的微信开发者工具中使用npm包
前端·npm·node.js