React的专栏|Antd如何用Menu组件渲染二级或三级目录 React的专栏|antd

今天给大家带来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 ( ={this.state.collapsed} onCollapse={this.onCollapse} > 智慧实验考试系统 { sidebar.map(curr=>{ if(curr.isMenubar){//判断是否是有下拉选项的菜单项 return ( ={curr.path} title={>>{curr.title}} >{ resourceManagementChildren.map(item=>{ //判断当前遍历到的列表的list属性是什么，渲染相对应的子目录 //资源管理子目录渲染 if(curr.list==='ResourceAdministration' && item.isresourceManagementChildren){ return ( {item.title} ) } return null; }) } ) } return ( >{curr.title} ) }) } ) }

【React的专栏|Antd如何用Menu组件渲染二级或三级目录】这样我们的二级菜单或者三级菜单就完成了！喜欢的别忘了关注笔者博客或者点个赞再走哦~
我们来一起看看效果图吧！