React + antd 實現左側多級菜單欄

routers.js

import News from '../components/News';
import ProductList from '../components/ProductList';
import User from '../components/User';
import UserList from '../components/UserList';
import UserAdd from '../components/UserAdd';
let routes = [
  {
    title: 'News',
    path: '/news',
    component: News
  }, {
    title: 'Products',
    path: '/products',
    component: ProductList
  }, {
    title: 'User',
    path: '/user',
    component: User,
    children: [{
      title: 'UserList',
      path: '/user/List',
      component: UserList
    }, {
      title: 'UserAdd',
      path: '/user/add',
      component: UserAdd
    }]
}];

export default routes;

Container.js

import React from 'react';
import { Menu } from 'antd';
import routes from '../router/routers';
import SubMenu from 'antd/lib/menu/SubMenu';
const Container = () => {

  function formSubmenuChild(obj) {
    let cHtml = <div></div>;
    let childArray = obj.children;
    if (obj.children && obj.children.length > 0) {
      cHtml = childArray.map((item, index) => {
        return formSubmenuChild(item);
      });
      return <SubMenu key={obj.path} title={obj.title}>{cHtml}</SubMenu>
    } else {
      return <Menu.Item key={obj.path}>{obj.title}</Menu.Item>
    }
  }

  let html = routes.map((obj, index) => {
    if (obj.children && obj.children.length > 0) {
      return formSubmenuChild(obj)
    } else {
      return <Menu.Item key={obj.path}>{obj.title}</Menu.Item>
    }
  });
  return (
    <div style={{display: 'flex', height: '100vh' }}>
        <div style={{ width: '200px', height: '100%'}}>
          <Menu mode="inline">
            {html}
          </Menu>
        </div>
        
        {/* <div className="container" style={{ flex: 1 }}>
          <div>{this.props.children}</div>
        </div> */}
      </div>
  );
};

Container.propTypes = {
};

export default Container;

參考： https://www.jianshu.com/p/77e48c129c16