基于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 收起