react中递归生成列表
2024-09-04 03:43:09
import React, {Component} from 'react';
import { Menu, Icon } from 'antd';
import {Link} from 'react-router-dom';
const menuList = [
{
title: '首页', // 菜单标题名称
key: '/home', // 对应的 path
icon: 'home', // 图标名称
},
{
title: '商品',
key: '/products',
icon: 'appstore',
children: [ // 子菜单列表
{
title: '品类管理',
key: '/category',
icon: 'bars'
},
{
title: '商品管理',
key: '/product',
icon: 'tool'
},
]
},
{
title: '用户管理',
key: '/user',
icon: 'user'
},
{
title: '角色管理',
key: '/role',
icon: 'safety',
},
{
title: '图形图表',
key: '/charts',
icon: 'area-chart',
children: [
{
title: '柱形图',
key: '/charts/bar',
icon: 'bar-chart'
},
{
title: '折线图',
key: '/charts/line',
icon: 'line-chart'
},
{
title: '饼图',
key: '/charts/pie',
icon: 'pie-chart'
},
]
},
];
const { SubMenu } = Menu;
class LeftMenu extends Component {
getMenuNodes = (menuList) => {
return menuList.map(item => {
if (!item.children) {
return (
<Menu.Item key={item.key}>
<Link to={item.key}>
<Icon type={item.icon} />
<span>{item.title}</span>
</Link>
</Menu.Item>
);
} else {
return (<SubMenu
key={item.key}
title={
<span>
<Icon type={item.icon} />
<span>{item.title}</span>
</span>
}
>
{
this.getMenuNodes(item.children)
}
</SubMenu>);
}
});
};
render() {
return (
<Menu
defaultSelectedKeys={['1']}
defaultOpenKeys={['sub1']}
mode="inline"
theme="dark"
>
{
this.getMenuNodes(MenuList)
}
</Menu>
)
}
}
export default LeftMenu;
最新文章
- Android菜单项内容大全
- WCF学习之旅—请求与答复模式和单向模式（十九）
- DDD~概念中的DDD（转）
- fool
- vue在多级联动时，一些情况不用watch而用onchange会更好
- Struts2 动态结果和带参数的跳转
- java web名词解释
- Knockout应用开发指南 第一章：入门
- struts1.3异常处理机制
- Yii PHP 框架分析（三）
- java 良好开发规范
- MVC验证03-自定义验证规则、禁止输入某些值
- 怎样将MySQL数据库上传到服务器
- Swift 学习笔记 （一）
- ormlite 批处理操作
- Linux安装mysql-5.7.17
- SpringMV---params and headers
- bzoj4514 数字配对
- 面向对象—的__new__()方法详解
- 解析<button>和<input type="button"> 的区别