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;

转载于:https://www.cnblogs.com/korea/p/11060687.html