学习自
https://blog.csdn.net/qq_41522343/article/details/112863231
https://blog.csdn.net/weixin_42661440/article/details/107523392
menuConfig.js
const menuList =[
{
title:'首页',
icon:'PieChartOutlined',
to:'/home'
},
{
title:'商品',
icon:'PieChartOutlined',
to:'/products',
children:[
{
title:'品类管理',
icon:'PieChartOutlined',
to:'/category'
},
{
title:'商品管理',
icon:'PieChartOutlined',
to:'/product'
}
]
},
{
title:'用户管理',
icon:'PieChartOutlined',
to:'/user'
},
{
title:'角色管理',
icon:'PieChartOutlined',
to:'/role'
},
{
title:'图形表',
icon:'PieChartOutlined',
to:'/charts',
children:[
{
title:'柱形图',
icon:'PieChartOutlined',
to:'/charts/bar'
},
{
title:'折线图',
icon:'PieChartOutlined',
to:'/charts/line'
},
{
title:'饼图',
icon:'PieChartOutlined',
to:'/charts/pie'
}
]
}
]
export default menuList
antd4中<Menu.Item icon={< PieChartOutlined />}>icon属性跟antd3中不一样,是节点属性,可以使用React.createElement方法来创建节点。
导入
import * as Icon from “@ant-design/icons”;
import menuList from ‘…/…/config/menuConfig’;
有三种写法:定义为变量,定义为函数,直接使用
// 第二种方法使用函数
geticon = (iconname) =>{
return React.createElement(Icon[iconname])
}
getMenuNodes = (menuList) => {
return menuList.map(item => {
// 第一种方法使用变量
// const icon = React.createElement(Icon[item.icon])
if(!item.children){
return (
{/*第一种方法使用*/}
{/*<Menu.Item key={item.key} icon={icon}>*/}
{/*第二种方法使用*/}
<Menu.Item key={item.key} icon={this.geticon(item.icon)}>
{/* <Menu.Item key={item.key} icon={icon}> */}
<Link to={item.key}>
<span>{item.title}</span>
</Link>
</Menu.Item>
)
}else{
return(
// 第三种方法直接使用React.createElement
<SubMenu key={item.key} icon={React.createElement(Icon[item.icon])} title={item.title}>
{this.getMenuNodes(item.children)}
</SubMenu>
)
}
})
}
还有一种方法,在config文件里直接导入antd4的icon
import React from 'react'
import {
HomeOutlined,/*首页*/
AppstoreOutlined,/*商品*/
BarsOutlined,/*品类管理*/
ToolOutlined,/*商品管理*/
UserOutlined,/*用户管理*/
SafetyCertificateOutlined,/*角色管理*/
AreaChartOutlined,/*图形图表*/
BarChartOutlined,/*柱形图*/
LineChartOutlined,/*折线图*/
PieChartOutlined,/*饼图*/
} from '@ant-design/icons';
const menuList = [
{
title: '首页',
key: '/home',
icon: <HomeOutlined />,
}, {
title: '商品',
key: '/products',
icon: <AppstoreOutlined />,
children: [
{
title: '品类管理',
key: '/category',
icon: <BarsOutlined />
}, {
title: '商品管理',
key: '/product',
icon: <ToolOutlined />
}]
}, {
title: '用户管理',
key: '/user',
icon: <UserOutlined />
}, {
title: '角色管理',
key: '/role',
icon: <SafetyCertificateOutlined />
}, {
title: '图形图表',
key: '/charts',
icon: <AreaChartOutlined />,
children: [
{
title: '柱形图',
key: '/charts/bar',
icon: <BarChartOutlined />
}, {
title: '折线图',
key: '/charts/line',
icon: <LineChartOutlined />
}, {
title: '饼图',
key: '/charts/pie',
icon: <PieChartOutlined />
}]
}
]
export default menuList
然后直接使用
getMenuNodes = (menuList) => {
return menuList.map(item =>{
if(!item.children){
return (
<Menu.Item key={item.key} icon={item.icon}>
<Link to={item.key}>
{item.title}
</Link>
</Menu.Item>
)
}else{
return (
<SubMenu key={item.key} icon={item.icon} title={item.title}>
{this.getMenuNodes(item.children)}
</SubMenu>
)
}
})
}