由于菜单栏内容较多,创建了一个菜单栏的数组,但是直接使用icon的话会直接显示文字。
页面上会显示的是文字,是错误的展示(如下图)
数组创建如下:
解决方案:使用React.createElement 创建
//引入antd-icon
import * as Icon from '@ant-design/icons
//创建节点的方法
iconBC(name){
console.log(name);
return React.createElement(Icon[name]);
}
allMenu.map((subMenu) => {
return (
<Menu.Item key={subMenu.url} icon={this.iconBC(subMenu.icon)}>
{subMenu.name}
</Menu.Item>
)
})
正确的页面如下:
import Icon from '@ant-design/icons';
import * as icons from '@ant-design/icons';
<Icon component={icons['CodeOutlined']} style={{fontSize:35}} />