基于react实现无限分级菜单
在开发CMS（内容管理系统）系统时，一般都会用到一个侧边栏或者顶部的二级或者三级菜单，当点击或者鼠标悬浮时，菜单能够随之展开或收起。
本文纯粹为了练习一下react，因此我会在react环境下实现这么一个小组件：它假设了菜单数据来自于网络请求，并且仅实现无限分级菜单的核心功能（父子关系，展开与收起），至于样式则不是关注的重点。
分析&设计
既然要实现一个动态生成的无限分级菜单，最简单的切入思路就是分析一个静态的菜单：其DOM树是怎样构成的？
下面是一个典型的HTML结构：
<ul>
<li>
<h1>菜单1</h1>
<ul>
<li>
<h1>菜单1-1</h1>
<ul></ul>
</li>
</ul>
</li>
<li>
<h1>菜单2</h1>
<ul>
<li>
<h1>菜单2-1</h1>
<ul>
<li>
<h1>菜单2-1-1</h1>
<ul></ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
这是一个3级菜单，我们需要仔细观察它的构成规律：
- 首先<ul>代表了一个菜单列表，它里面包含了若干<li>代表其中1个菜单项。
- 每个<li>菜单项至少包含自己的标题，其次也应包含它下面的子菜单列表（也就是另一个<ul>）。
上述2个规则基本就是分级菜单的核心构思了，通过一个比较白话的描述可以这么理解：
要画一个菜单列表，那么就要去画它的每一个菜单项。
要画一个菜单项，那么就要画出标题，然后去画它的子菜单列表。
如果你反复的读上面的话，你可以感受到一种『递归的味道』。
没错，要根据菜单数据动态的画出一个无限分级的菜单是要用递归算法的。有意思的是，递归算法本身是深度优先的，而这恰好满足我们从上至下从外至内顺序追加HTML标签，从而最终构成完整的DOM树的编程思路。
数据结构&算法
程序设计=数据结构+算法。
因此，先用一个合理的数据结构来描述之前我们的构思，之后基于数据结构进行算法的实现，最终形成程序，这是我们正确的编程思路。
通常，菜单结构是服务端拼装的，它描述了菜单的父子和顺序关系，并且每个菜单拥有自己的唯一ID，这些都体现在我的render()方法中：
render() {
let data = [
{
menuId: 1,
name: '员工管理',
children: [
{
menuId: 3,
name: '添加员工',
children: []
},
{
menuId: 4,
name: '删除员工',
children: [
{
menuId: 6,
name: '按姓名删除',
children: []
},
{
menuId: 7,
name: '按工号删除',
children: []
}
]
}
],
},
{
menuId: 2,
name: '工资管理',
children: [
{
menuId: 5,
name: '修改工资',
children: []
}
],
},
];
return (
<div>
{this.generateMenu(data)}
</div>
);
}
最外层是一个菜单列表（Array），每个菜单项（Object）里有自己的标题，唯一ID，以及子菜单列表（Array）。
在render()方法里调用了我实现的递归算法generateMenu(data)，根据上述数据结构和原理递归的生成了DOM树：
/**
* 递归生成菜单
* @param menuObj
* @returns {Array}
*/
generateMenu(menuObj) {
let vdom = [];
if (menuObj instanceof Array) {
let list = [];
for (var item of menuObj) {
list.push(this.generateMenu(item));
}
vdom.push(
<ul key="single">
{list}
</ul>
);
} else {
vdom.push(
<li key={menuObj.menuId}>
<h1 onClick={this.onMenuClicked}>
{menuObj.name}
</h1>
{this.generateMenu(menuObj.children)}
</li>
);
}
return vdom;
}
- 第1个分支判断：如果当前对象是菜单列表（Array类型），那么应生成1个新的<ul>元素，并且递归画出每一个菜单项（Object类型）。
- 第2个分支判断：如果当前对象是菜单项（Object类型），那么应生成1个新的<li>元素，填充1个<h1>作为标题，其次递归画出它的子菜单列表。
最后，为了实现点击鼠标展开和收起菜单，我为每一个<h1>标签注册了onClick事件，当它们被点击时找到<h1>的兄弟<ul>元素（利用jquery搞定），修改其CSS display属性即可实现展现和隐藏其子菜单列表的效果了。
体验效果（react组件）
查看代码：https://github.com/owenliang/react/tree/master/component/MenuPage
查看demo：http://yuerblog.cc/wp-content/uploads/2016/11/output/#/menu-page
demo可以点击体验展开 or 收起
