如何构建静态侧边栏（写死）
https://ant.design/components/menu-cn/#API
1 .js文件中 配置菜单项信息
- 引入 React
- 添加 icons
- < ____ /> 想要的icons组件名 menuList为菜单项的数组
import React, {
Component } from react
import {
AppstoreOutlined,
MenuUnfoldOutlined,
MenuFoldOutlined,
PieChartOutlined,
DesktopOutlined,
ContainerOutlined,
MailOutlined,
} from @ant-design/icons;
const menuList = [
{
title: 首页, // 菜单标题名称
key: /home, // 对应的path
icon: <DesktopOutlined/>, // 图标名称
isPublic: true, // 公开的
},
{
title: 商品,
key: /products,
icon: appstore,
children: [ // 子菜单列表
{
title: 品类管理,
key: /category,
icon:
},
{
title: 商品管理,
key: /product,
icon:
},
]
},
{
title: 用户管理,
key: /user,
icon:
},
{
title: 角色管理,
key: /role,
icon:
},
{
title: 图形图表,
key: /charts,
icon: area-chart,
children: [
{
title: 柱形图,
key: /charts/bar,
icon:
},
{
title: 折线图,
key: /charts/line,
icon:
},
{
title: 饼图,
key: /charts/pie,
icon:
},
]
},
]
export default menuList
2 .jsx文件中 map+递归
getMenuNodes_map = (menuList)=>{
return menuList.map(item=>{
if(!item.children){
return(<Menu.Item key={
item.key} icon={
item.icon} >
<Link to={
item.key}>
<span>{
item.title}</span>
</Link>
</Menu.Item>)
}else{
return(<SubMenu key={
item.key} title={
item.title} icon={
item.icon}>
{
this.getMenuNodes(item.children)}
</SubMenu>)
}
})
}
3 render return中添加以下语句
<Menu>
{
this.getMenuNodes(menuList)}
<Menu/
