标签：菜单 curr 渲染 Menu Antd 组件 return sidebar

今天给大家带来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>
	 )
	}

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

标签：菜单,curr,渲染,Menu,Antd,组件,return,sidebar
来源： https://blog.51cto.com/u_15275953/2924542

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。