antd-menu递归封装

import React from 'react'
import { Menu } from 'antd';
import { mainRoutes, IRouter } from '../../routes/';
import { Link } from 'react-router-dom'

const { SubMenu } = Menu;

function MenuTabs(props:any) {
    const menuTabs = (list:IRouter[]) => {
        return list.map((item:IRouter, index:number) => {
            if (item.children && item.children.length) {
                return (
                    <SubMenu key={ item.path } title={ item.title }>
                        {
                            menuTabs(item.children)
                        }
                    </SubMenu>
                )
            } else {
                return  (
                    <Menu.Item key={ item.path }>
                        <Link to={item.path}>{item.title}</Link>
                    </Menu.Item>
                )
            }
        })
    }
    return (
        <Menu theme="dark" mode='inline'
            >
            {
                menuTabs(mainRoutes)
            }
        </Menu>
    )
}

export default MenuTabs