问题描述
后端传递导航,数据格式带了icon。如下
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',
},
],
},
];
不做处理渲染的话结果如下
文章来源:https://www.toymoban.com/news/detail-807655.html
解决方案
导入需要的antd组件,在拿到后端数据后把原本的icon字符串替换为antd对应的icon组件文章来源地址https://www.toymoban.com/news/detail-807655.html
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)
}
到了这里,关于后端传递的图标是字符串形式的 Ant Design 图标组件怎么避免被解析为普通文本的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!