react 树形菜单_关于React 使用antd组件递归实现左侧菜单导航树（MenusTree）的示例...
一、菜单组件Demo
这里本人采用的是蚂蚁金服(antd)组件库里的{Menu}组件写的一个左侧菜单树的小Demo(整套开发环境是React+Redux+webpack)
import React from 'react';
import { Menu, Icon } from 'antd';
import {WeaScroll} from 'ecCom';
import {bindActionCreators} from 'redux';
import {connect} from 'react-redux';
import * as themeActions from '../../../actions/theme';
const SubMenu = Menu.SubMenu;
class E9LeftMenusTree extends React.Component{
componentWillMount() {
}
//递归函数生成左侧菜单树
//这里通过函数的形式，通过递归自身function的方式来生成菜单树的子菜单
formSubmenusChild(obj){
let cHtml=
let childArray=obj.child;
if("undefined"!=typeof(childArray)&&childArray.length>0) {
cHtml = childArray.map((item, i) => {
return this.formSubmenusChild(item);
});
return {cHtml}
}else{
return
{obj.name}}
}
handleClick(e) {
const {actions}=this.props;
let menuInfo={
//打印antd Menu组件的onClick返回值(e)可以看出通过e.item.props来获取我们item组件的自定义属性
routeurl:e.item.props.routeurl,
url: e.key,
target:'mainFrame'
}
//根据route路由地址和iframe地址的值判断使用哪个作为菜单页面展示方式
actions.onLoadMain(menuInfo);
}
render() {
const {columnMenuInfo,backEndMenuUrl} = this.props;
let columnMenus=columnMenuInfo.toJSON();
let html=columnMenus.map((obj,i)=> {
if ("undefined"!=typeof(obj.child)&&obj.child.length>0) {
return this.formSubmenusChild(obj);
} else {
//这里的routeurl是路由地址，是自定义的一个属性
return
{obj.name}}
});
return (
onClick={this.handleClick.bind(this)}
style={{ width: 201}}
defaultOpenKeys={['sub1']}
selectedKeys={[backEndMenuUrl]}
mode="inline"
>
{html}
)
}
}
function mapStateToProps(state) {
const {middleTheme} = state;
return {
backEndMenuUrl: middleTheme.get('backEndMenuUrl'),
columnMenuInfo:middleTheme.get('columnMenuInfo')
}
}
function mapDispatchToProps(dispatch) {
return {
actions: bindActionCreators(themeActions, dispatch)
};
}
module.exports = connect(mapStateToProps, mapDispatchToProps)(E9LeftMenusTree);
相关文章：
SQL快速入门 ( MySQL快速入门, MySQL参考, MySQL快速回顾 )
SQL 先说点废话，很久没发文了，整理了下自己当时入门 SQL 的笔记，无论用于入门，回顾，参考查询，应该都是有一定价值的，可以按照目录各取所需。SQL数据库有很多，MySQL是一种，…
MyEclipse2014配置Tomcat开发JavaWeb程序JSP以及Servlet
1.安装准备 1).下载安装MyEclipse2014，这已经是最新版本。2).下载Tomcat 官网：http://tomcat.apache.org/ 我们选择8.0： http://tomcat.apache.org/download-80.cgi 在windows下选择64位解压版：http://mirror.bit.edu.cn/apache/t…
[转]Linux 的多线程编程的高效开发经验
Linux 平台上的多线程程序开发相对应其他平台（比如 Windows）的多线程 API 有一些细微和隐晦的差别。不注意这些 Linux 上的一些开发陷阱，常常会导致程序问题不穷，死锁不断。本文中我们从 5 个方面总结出 Linux 多线程编程上的问题…
mac webpack 版本_晓前端周刊 第48期：EMP面向未来微前端方案正式开源了！玩转 webpack，使你的打包速度提升 90%；...
业界动态苹果最大杀招：iPhone App 已能在电脑运行近日网友反馈，苹果 App Store 中大量应用在兼容性一栏中显示：已支持运行 macOS 11(及以上版本)的 Mac 电脑。这意味着，iPhone 中的应用，已可以在 Mac 电脑中运行。并非…
LNMP安装配置
LNMP安装配置 目录bin：存放普通用户可执行命令sbin:存放超级用户可执行命令which iptables ： 查看boot目录：存放系统启动所需（内核，映像）dev：设备文件（鼠标，键盘...等外部…
效果广告点击率预估实践：在线学习
效果广告点击率预估实践：在线学习 原创 2016-03-24 腾讯大数据 腾讯大数据1.引言 技术钻研如逆水行舟，不进则退。公司的广告业务发展非常迅猛，有目共睹，激烈的外部竞争和客户越来越高的期望，都要求我们的技术不断进步&…
Redis安装与调试
Redis安装与调试 Redis安装与调试linux版本：64位CentOS 6.5 Redis版本：2.8.17 (更新到2014年10月31日) Redis官网：http://redis.io/ Redis常用命令：http://redis.io/commands 1.安装Redis # wget http:…
lumen mysql 事务_简单几部搞定laravel/lumen跨库操作
1.跨库数据库配置在网站跟目录下的config文件中增加database.php作为数据库配置文件。配置如下：//当前默认数据库mysql > [driver > mysql,host > env(DB_HOST, localhost),port > env(DB_PORT, 3306),database > env(DB_DATABASE, forge),username …
springMVC出现HTTP Status 405 - Request method 'GET' not supported错误的解决方法
今天在写一个简单的springMVC的表单请求处理时，出现了这个问题。我的form表单用的是post方法提交，并没有使用get方法，出现这个问题时，笔者可谓是一脸懵逼。这是form表单：这是对post请求的处理方法：检查了半…
从Nginx源码谈大小写字符转化的最高效代码以及ASCII码表的科学
说起大小写字母转换，大家很容易想起系统函数是不是，几乎所有的编程语言都提供了这种转换函数，但是你有没有想过这背后是怎么实现的？ 让你写怎么实现？我们都知道Nginx是目前用的最多的Http服务器，那么他的代…
常回“家”看看
近一年来很少写博客了，原因很多，一言难尽！感觉人在每个阶段思想都在不断发生变化，往往某一时期认定的事情会在另外一个阶段发生自我否定或者是改变！之前认为自己也许不再走技术路线了，所以把精力都放在了其…
python launcher怎么使用_QMUI实战(一)—为何我们要使用 LauncherActivity?
QMUI 2 发布了，但是里面换肤等相关的很多东西，如果不讲，那么很多人估计就只能复制粘贴下 QMUIDemo 的代码，而并不能用好 QMUI， 或者是通过 QMUI 来提升自己的 UI 开发能力，毕竟现在很多 Android 开发都是轻…
CoAP 协议解析说明（转）
CoAP 协议全面分析 HTTP与COAP 请求与响应示例 HTTP请求（文本格式） POST https://getman.cn/echo HTTP/1.1 User-Agent: Fiddler Host: getman.cn Content-Length: 9{temp:22}HTTP响应（文本格式） HTTP/1.1 200 OK Server: NWSs Da…
孔雀翎----《Programming C# 》中文版 第4版
孔雀翎----《Programming C# 》中文版 第4版 主页：http://blog.csdn.net/21aspnet/ 时间：2007.8.7 电子工业出版社给我邮寄了此书，所以本人可以先在出版之前一睹为快。 本人曾看过300多本.NET方面的书，感慨颇深。其实一…
iOS开发小技巧--textField成为密码框，view加载完后textField获取焦点
文本框安全输入：Secure Text Entry（安全文本输入）view加载完后textField获取焦点的正确做法
python出现typeerror原因是_Python 文件添加列表数据后TypeError原因
# -*- coding: utf-8 -*-#打开文件，将文件读入字符串colfopen(pride.txt)textf.read()colstext.split()f2open(data.txt,w)for col in cols:f2.write(col)f2.write(\n)以上代码运行无误。# -*- coding: utf-8 -*-#打开文件，将文件读入字符串colfopen(pri…
LVM逻辑卷创建管理
LVM（逻辑分区）的创建顺序：物理分区－物理卷－卷组－逻辑卷－挂载。物理卷（Physical Volume,PV）：就是指硬盘分区，也可以是整个硬盘或已创建的软RAID&am…
Linux环境PHP5.5以上连接SqlServer2008【全网最经典无错版】
linux版本：64位CentOS 6.4 Nginx版本：nginx1.8.0 php版本：php5.5.28 Sqlserver版本：2008 FreeTDS版本：0.95 关于Linux环境安装NginxPHP参考Linux环境Nginx安装与调试以及PHP安装 即可。一般来说，PHPmysql是…
python矩阵运算库效率_python - 布尔矩阵运算的最快方法_performance_酷徒编程知识库...
只需在compute中进行一些小的更改：def compute(m, n):m np.asarray(m)n np.asarray(n)# Apply mask N in advancem2 m & n# Pack booleans into uint8 for more efficient bitwise operations# Also transpose for better caching (maybe?)mb np.packbits(…
hibernate-session中的方法
1.操作实体对象的方法 save() 保存 update() 更新 saveOrUpdate() 保存或更新 delete() 删除 2.操作缓存的方法 clear() 清除所有缓存 evit() 将指定对象清除出缓存 flush() 刷新到数据库中（）马上执行sql语句，不会清除session缓存&#x…
[JZOJ4786]小a的强迫症
[JZOJ4786]小a的强迫症 题目大意： 有\(n(n\le10^5)\)种颜色的珠子，第\(i\)种颜色有\(num[i]\)个。你要把这些珠子排成一排，使得第\(i\)种颜色的最后一个珠子一定在第\(i1\)种珠子的最后一个珠子之前，求方案数。 思路： …
Servlet,过滤器，监听器，拦截器的区别
由于最近两个月工作比较清闲，个人也比较“上进”，利用工作空余时间，也继续学习了一下，某天突然想起struts2和struts1的区别的时 候，发现为什么struts1要用servlet，而struts2要用filter呢？一时又…
Linux环境Nginx安装多版本PHP
关于Linux环境Nginx安装与调试以及PHP安装参考此文即可：http://blog.csdn.net/unix21/article/details/8544922linux版本：64位CentOS 6.4 Nginx版本：nginx1.8.0 php版本：php5.5.28 & php5.4.44 所谓多版本多版本PHP就是php5.4…
java 扫描tcp端口号_多线程TCP端口扫描 java实现
界面部分：import java.awt.Color;import java.awt.Container;import java.awt.FlowLayout;import java.awt.event.WindowAdapter;import java.awt.event.WindowEvent;import javax.swing.JDialog;import javax.swing.JFrame;import javax.swing.JLabel;import javax…
【go同步编程】
锁 互斥锁 函数write中的这条defer语句保证了在该函数被执行结束之前互斥锁mutex一定会被解锁。 var mutex sync.Mutex func write() { mutex.Lock() defer mutex.Unlock() // 省略若干条语句 } func repeatedlyLock() {var mutex sync.Mutexfmt.Println("Lock the lock. …
Linux环境PHP7.0安装
PHP7和HHVM比较PHP7的在真实场景的性能确实已经和HHVM相当, 在一些场景甚至超过了HHVM。HHVM的运维复杂, 是多线程模型, 这就代表着如果一个线程导致crash了, 那么整个服务就挂了, 并且它不会自动重启。另外它采用JIT, 那么意味着, 重启以后要预热, 没有预热的情况下, 性能较为…
myeclipse java可视化_使用MyEclipse可视化开发Hibernate实例
使用MyEclipse可视化开发Hibernate实例2.7节的例子源代码在配套光盘sourcecode/workspace目录的chapter02_first项目中。这个实例主要演示如何使用MyEclipse的可视化开发工具开发Hibernate应用，利用MyEclipse可以提高我们开发Java EE应用的效率。操作的数据库表还是…
day20 文件上传下载
2019独角兽企业重金招聘Python工程师标准>>> 文件上传基础及api解析： 文件上传最终版： 文件下载： 转载于:https://my.oschina.net/u/2356966/blog/648774
腾讯开源基于 mmap 的高性能 key-value 组件 MMKV
腾讯微信团队宣布开源 MMKV ，这是基于 mmap 内存映射的 key-value 组件，底层序列化/反序列化使用 protobuf 实现，主打高性能和稳定性。MMKV 从 2015 年中至今，在 iOS 微信上使用已有近 3 年，其性能和稳定性经过了时间的…
Linux环境thinkphp配置以及数据源驱动修改
项目中需要用到thinkphp，以下简称tp。linux版本：64位CentOS 6.4 Nginx版本：nginx1.8.0 php版本：php5.5.28 thinkphp版：3.2.31.安装LNMP Linux环境Nginx安装与调试以及PHP安装2.项目框架 tp源码下载http://www.thinkphp…