menuConfig
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
创建并渲染
getMenuList = (menuList) => {
return menuList.map(v => {
if (!v.children) {
//antd4中动态创建icon
const icon = React.createElement(
Icon[v.icon],
{
style:{ fontSize: '16px'}
}
)
return (
//渲染
<Menu.Item key={v.to} icon={icon}>
<Link to={v.to}>
{v.title}
</Link>
</Menu.Item>
)
}else{
const icon= React.createElement(
Icon[v.icon],
{
style:{ fontSize: '16px'}
}
)
return (
<SubMenu key={v.to} title={v.title} icon={icon}>
{
this.getMenuList(v.children)
}
</SubMenu>
)
}
})
}