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;

react中递归生成列表的更多相关文章

  1. 在React中随机生成图形验证码

    各个方法 在输入框中定义一个位置存放图形 完整代码 方便复制粘贴 import React, { Component } from 'react'; import styles from './lef ...

  2. React 点击删除列表中对应项(React 获取DOM中自定义属性)

    点击删除按钮,删除列表中对应项本来是React比较基础的应用,可是应用情况变得复杂了以后,我还真想了一会儿才搞定. 简化一下应用场景:点击新增按钮,增加一条输入框,点击输入框旁边的按钮,删除该输入框( ...

  3. 深入理解react中的虚拟DOM、diff算法

    文章结构: React中的虚拟DOM是什么? 虚拟DOM的简单实现(diff算法) 虚拟DOM的内部工作原理 React中的虚拟DOM与Vue中的虚拟DOM比较 React中的虚拟DOM是什么?   ...

  4. 在react中实现打印功能

    最近项目中,前端采用react+antd+dva的组合,已经完成了后头管理类系统产品的更新迭代工作. 今天有一个新需求,需要在后台管理系统中实现点击打印完成指定页面的打印功能. 之前也没接触过,只知道 ...

  5. python中递归调用

    递归一个通俗的解释就是,在函数中调用函数本身:伪代码如下: In [31]: def fun(): ....: fun() # 这个递归没有任何作用,只是为了说明什么是递归 递归(Recursion) ...

  6. React中key的讲解

    通过阅读React的文档我们知道React这个框架的核心思想是,将页面分割成一个个组件,一个组件还可能嵌套更小的组件,每个组件有自己的数据(属性/状态);当某个组件的数据发生变化时,更新该组件部分的视 ...

  7. 从JSON中自动生成对应的对象模型

    编程的乐趣和挑战之一,就是将体力活自动化,使效率成十倍百倍的增长. 需求 做一个项目,需要返回一个很大的 JSON 串,有很多很多很多字段,有好几层嵌套.前端同学给了一个 JSON 串,需要从这个 J ...

  8. React中JSX的理解

    React中JSX的理解 JSX是快速生成react元素的一种语法,实际是React.createElement(component, props, ...children)的语法糖,同时JSX也是J ...

  9. React中的合成事件

    React中的合成事件 React自己实现了一套高效的事件注册.存储.分发和重用逻辑,在DOM事件体系基础上做了很大改进,减少了内存消耗,简化了事件逻辑,并最大程度地解决了IE等浏览器的不兼容问题. ...

随机推荐

  1. HDU 6039 - Gear Up | 2017 Multi-University Training Contest 1

    建模简析: /* HDU 6039 - Gear Up [ 建模,线段树,图论 ] | 2017 Multi-University Training Contest 1 题意: 给你n个齿轮,有些齿轮 ...

  2. js比较两个时间的大小

    function checkdate(s,e){ //得到日期值并转化成日期格式,replace(/-/g, "//")是根据验证表达式把日期转化成长日期格式,这样再进行判断就好判 ...

  3. 对webview的研究--------引用

    简要的说,webview能够在移动应用中开辟出一个窗口,在里面显示html页面,css以及js代码也可以被解析执行,它使用的是我们熟悉的webkit内核.android和ios都有相应的API,所以写 ...

  4. pdf缩略图生成上传解决方案

    前言:因自己负责的项目(jetty内嵌启动的SpringMvc)中需要实现文件上传,而自己对java文件上传这一块未接触过,且对 Http 协议较模糊,故这次采用渐进的方式来学习文件上传的原理与实践. ...

  5. hdu 5533 正n边形判断 精度处理

    Dancing Stars on Me Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 262144/262144 K (Java/Ot ...

  6. CUDA-F-2-2-核函数计时

    Abstract: 本文介绍CUDA核函数计时方法 Keywords: gettimeofday,nvprof 开篇废话 继续更新CUDA,同时概率和数学分析也在更新,欢迎大家访问www.face2a ...

  7. go之流程控制

    一.与用户交互 var name string fmt.Scanln(&name) # 一定得传指针,因为我要修改的是name的值 fmt.Println(name) 二.if判断 1.if ...

  8. unity的Tilemap学习笔记

    1,如果要实现当tilemap里面的格子与其他的对象发生碰撞后,消除碰撞的那个格子,使用如下代码. void OnCollisionEnter2D(Collision2D collision) { V ...

  9. C语言博客作业00

    对网络专业的了解 我一直觉得计算机是个很神奇的东西,就像大脑中有思想一样,在一个有形的芯片中能储存着无形的数据.它们的存储方式是什么?读取方式又是什么?为什么2个数字能产生如此巨大的信息?为什么点击鼠 ...

  10. linux mmap 内存映射

    mmap() vs read()/write()/lseek() 通过strace统计系统调用的时候,经常可以看到mmap()与mmap2().系统调用mmap()可以将某文件映射至内存(进程空间), ...