ant Design 无限菜单的写法

给定一个有序的 菜单列表
例如：

 const route = [{
                title: '控制台',
                key: '/home',
            },
            {
                title: '用户管理',
                key: '/home/index',
                child: [{
                        title: '用户列表',
                        key: '/home/index/content'
                    },
                    {
                        title: '员工管理',
                        key: '/home/index/...',
                        child: [{
                                title: '姓名',
                                key: '/home/index/...'
                            },
                            {
                                title: '年龄',
                                key: '/home/index/...'
                            }
                        ]
                    }
                ]
            },
            {
                title: '部门管理',
                key: '/home/...',
                child: [{
                        title: 'xx部门',
                        key: '/home/xxx',
                    },
                    {
                        title: 'xxx部门',
                        key: '/home',
                    },
                ]
            }
        ]

主要的点就是简单的递归来判断循环

      route &&route.map((item) => {
            console.log(item);
            return item.child && item.child.length > 0
              ? this.renderSubmenu(item)
              : this.renderMenu(item);
          })

如果我们有子集和子集的长度大于零的话 ，我们就进入 renderSubMenu函数，否则进入renderMenu函数，并且把我们的实参给这两个函数

• 先看renderMenu
  没有子集的话就直接更新

renderMenu({ title, key }) {
    return <Menu.Item>{title}</Menu.Item>;
  }

• 再看renderSubMneu
  有子集调用子集，否则调用renderMenu

 renderSubmenu({ title, child, key }) {
    return (
     <SubMenu title={title}>
        {child &&child.map((item) => {
            return (
                {item.child && item.child.length > 0 ? this.renderSubmenu(item) : this.renderMenu(item)}
            )
          })}
      </SubMenu>
    );
  }

代码没有验证过，只是一个大致的流程