react中递归生成列表

import React,{Component} from 'react';
import { Menu,Icon } from 'antd';
import {Link} from 'react-router-dom';
const menuList = [
    {
        title: '首页',// 菜单标题名称
        key: '/home',// 对应的 path
        icon: 'home',// 图标名称
    },{
        title: '商品',key: '/products',icon: 'appstore',children: [ // 子菜单列表
            {
                title: '品类管理',key: '/category',icon: 'bars'
            },{
                title: '商品管理',key: '/product',icon: 'tool'
            },]
    },{
        title: '用户管理',key: '/user',icon: 'user'
    },{
        title: '角色管理',key: '/role',icon: 'safety',},{
        title: '图形图表',key: '/charts',icon: 'area-chart',children: [
            {
                title: '柱形图',key: '/charts/bar',icon: 'bar-chart'
            },{
                title: '折线图',key: '/charts/line',icon: 'line-chart'
            },{
                title: '饼图',key: '/charts/pie',icon: 'pie-chart'
            },];


const { SubMenu }  = Menu;
class LeftMenu extends Component {
    getMenuNodes = (menuList) => {
        return menuList.map(item => {
           if (!item.children) {
               return (
                   <Menu.Item key={item.key}>
                       <Link to={item.key}>
                           <Icon type={item.icon} />
                           <span>{item.title}</span>
                       </Link>
                   </Menu.Item>
               );
           }  else {
               return (<SubMenu
                   key={item.key}
                   title={
                       <span>
                <Icon type={item.icon} />
                <span>{item.title}</span>
              </span>
                   }
               >
                   {
                       this.getMenuNodes(item.children)
                   }
               </SubMenu>);
           }
        });
    };

    render() {
        return (
            <Menu
                defaultSelectedKeys={['1']}
                defaultOpenKeys={['sub1']}
                mode="inline"
                theme="dark"
            >
                {
                    this.getMenuNodes(MenuList)
                }
            </Menu>
        )
    }
}

export default LeftMenu;