React + antd 实现左侧多级菜单栏

最新推荐文章于 2024-11-22 08:32:57 发布

原创最新推荐文章于 2024-11-22 08:32:57 发布 · 5.5k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

React 专栏收录该内容

2 篇文章

订阅专栏

本文档介绍如何利用React和antd库创建一个功能完善的左侧多级菜单栏。通过阅读，你将学习到在'routers.js'和'Container.js'文件中设置路由和组件的技巧，并参考了一个详细的教程链接。

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