Router路由目录:
const router = [
{
"title": "后台首页",
"icon": "home",
"path": "/home"
},
{
"title": "商品管理",
"icon": "carts",
"path": "/catalogProduct",
"children": [
{
"title": "全部商品",
"icon": "carts",
"path": "/catalog"
},
{
"title": "上架商品",
"icon": "carts",
"path": "/product"
}
]
},
{
"title": "用户管理",
"icon": "user",
"path": "/user"
},
{
"title": "图形图标",
"icon": "home",
"path": "/pieline",
"children": [
{
"title": "饼图",
"icon": "home",
"path": "/pie"
},
{
"title": "折线图",
"icon": "home",
"path": "/line"
}
]
}
]
判断并提供jsx中渲染的结构:
getMenuNodes = (MenuList) => {
return MenuList.map(item => {
if (!item.children) {
return (
<Menu.Item key={item.path}>
<Link to={item.path}>
<Icon type={item.icon} />
<span>{item.title}</span>
</Link>
</Menu.Item>
)
} else {
return (
<SubMenu
key={item.path}
title={
<span>
<Icon type={item.icon} />
<span>{item.title}</span>
</span>
}>
{this.getMenuNodes(item.children)}
</SubMenu>
)
}
})
}
写在jsx中:
render() {
const path = this.props.location.pathname
return (
<div className='MenuLeft'>
<Menu
mode="inline"
theme="dark"
selectedKeys={[path]}
>
{
this.getMenuNodes(config.menuList)
}
</Menu>
</div>
);
}