级联菜单的递归实现Antd

map()+递归调用

getMenuNodes = (menuList) => {
  return menuList.map(item => {
      if (!item.children) {
          return (
              <Menu.Item key={item.key} icon={item.icon}>
                  <Link to={item.key}>
                      {item.title}
                  </Link>
              </Menu.Item>
          )
      } else {
          return (
              <SubMenu key={item.key} icon={item.icon} title={item.title}>
                  {this.getMenuNodes(item.children)}
              </SubMenu>
          )
      }
  })
}

reduce()+递归调用

getMenuNodes = (menuList) => {
        return menuList.reduce((pre, item) => {
            if (!item.children) {
                pre.push((
                    <Menu.Item key={item.key} icon={item.icon}>
                        <Link to={item.key}>
                            {item.title}
                        </Link>
                    </Menu.Item>
                ))
            } else {
                pre.push((
                    <SubMenu key={item.key} icon={item.icon} title={item.title}>
                        {this.getMenuNodes(item.children)}
                    </SubMenu>
                ))
            }
            return pre
        }, [])
    }

<Menu
    defaultSelectedKeys={['/home']}
    mode="inline"
    theme="dark"
>
    {
        this.getMenuNodes(menuList)
    }
</Menu>

const menuList = [
  {
      title: '首页',
      key: '/home',
      icon: <HomeOutlined />,
  }, {
      title: '商品',
      key: '/products',
      icon: <AppstoreOutlined />,
      children: [
          {
              title: '品类管理',
              key: '/category',
              icon: <BarsOutlined />
          }, {
              title: '商品管理',
              key: '/product',
              icon: <ToolOutlined />
          }]
  }
]