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

 

posted @ 2016-11-17 18:25  开心比什么都贵  阅读(2417)  评论(0编辑  收藏  举报