Antd如何用Menu组件渲染二级或三级目录

今天给大家带来React项目结合Antd的时候如何渲染二级菜单
就算你用其他的UI框架也是换汤不换药。

1.首先配置Antd,关于配置Antd请前往React配置Antd处观看。

2.然后在routes文件定义你的sidebar数据

其中有一个isSiderbar标记，这个就是我们待会用来判断是否是sidebar的类型。

3.接下来我们写二级菜单的数据

其中有isresourceManagementChildren标记是判断是否为指定分组的二级菜单的。（如果你有三级菜单什么的就在自己创建数据加标记就可以了）

4.导出你的数据

5.在你的sidebar组件中从antd引入你需要的组件

import {
	Layout,
	Menu,
	Icon,
} from 'antd'
const { Sider } = Layout;
const SubMenu = Menu.SubMenu;

6.然后再引入你刚刚写的routes数据

7.筛选你想要的数据，我们这里这需要sidbar的数据，那么我们就用filter筛选一下

8.再render里面渲染元素

render() {
	return (
	     <Sider
	         collapsible
	         collapsed={this.state.collapsed}
	         onCollapse={this.onCollapse}
	     >
	         <div className="logo">智慧实验考试系统</div>
	         <Menu theme="" defaultSelectedKeys={['foundationplatform']} mode="inline">
	         {
	             sidebar.map(curr=>{
		            if(curr.isMenubar){     //判断是否是有下拉选项的菜单项
		                 return (
		                 <SubMenu
		                     key={curr.path}
		                     title={<span><Icon type={curr.iconType} /><span>{curr.title}</span></span>}
		                 >{
		                     resourceManagementChildren.map(item=>{
		                     //判断当前遍历到的列表的list属性是什么，渲染相对应的子目录
		                     //资源管理子目录渲染
		                     if(curr.list==='ResourceAdministration' && item.isresourceManagementChildren){
		                         return (
		                         <Menu.Item 
		                             key={item.path}
		                             onClick={this.menuChange}
		                         >{item.title}</Menu.Item>
		                         )
		                     }
		                     return null;
		                     })
		                 }</SubMenu>
		                 )
		             }
		             return (
		                 <Menu.Item 
		                     key={curr.path}
		                     onClick={this.menuChange}>
		                     <Icon type={curr.iconType} />
		                     <span>{curr.title}</span>
		                 </Menu.Item>
		             )
	             })
	         }
	         </Menu>
	     </Sider>
	 )
	}

这样我们的二级菜单或者三级菜单就完成了！喜欢的别忘了关注笔者博客或者点个赞再走哦~
我们来一起看看效果图吧！