递归菜单

import React, { Component } from 'react';

import { Menu } from 'antd';

 

import 'antd/dist/antd.css';

import './App.css'

const { SubMenu } = Menu;

class App extends Component{

  

  fn(subMenus) {

    if(subMenus.subMenus.length>0){

      let subMenus2 = subMenus.subMenus

      return(<SubMenu key={subMenus.menuTitle} title={subMenus.menuTitle}>

        {

          subMenus2.map((ele) => {

             return this.fn(ele)

           })

        }    

      </SubMenu>)

    }else{

    return <Menu.Item key={subMenus.menuTitle}>{subMenus.menuTitle}</Menu.Item>

    }

  }

 

  render(){

     data = 【】

    let subMenus = data.filter(ele => {

       return ele.menuName === 'network_mgmt'

     })

     subMenus = subMenus[0].subMenus

    return(<Menu style={{ width: 256 }} mode="inline">

      {

        subMenus.map( (ele) => {

         return this.fn(ele)

        })

      }

    </Menu>)

   

  }

  

}

 

export default App;