在开发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;

    }