内容简介:随着侧边栏的东东越来越多..本来不考虑的三级菜单,也需要考虑进去了;一开始都是手动有兴趣的瞧瞧
随着侧边栏的东东越来越多..本来不考虑的三级菜单,也需要考虑进去了;
一开始都是手动 map
去遍历对应的组件, 相关的的组 id
这些也是简单的判断下 children
就返回一个值;
有兴趣的瞧瞧
分析所需
路由规格统一,层级不定,允许子项带图标,自动生成对应的菜单栏数据
路由的写法是静态路由表的姿势;
const RouterTree = [ { key: 'g0', icon: 'dashboard', text: '数据分析', path: '/dashboard', children: [ { key: '1', text: '数据概览', path: '/dashboard/monitor', }, { key: '2', text: '日活月活', path: '/dashboard/dau', }, { key: '3', text: '用户留存', path: '/dashboard/retentio .... 此处省略N多重复规格的 复制代码
思路
我的思路是直接递归,写成一个函数式组件.
风格用了 antd
;
效果图
代码实现及用法
代码实现
- 递归组件函数
性能耗时
基于我项目的,就二十来个左右,最深是三层,用 console.time()
跑了下,性能还好
首次遍历树: 0.782958984375ms 第二次遍历树: 0.385009765625ms 复制代码
里面的 callback
主要是由外部传递一个处理函数,比如跳转的处理等等
// 递归侧边栏 sidebarTree = (RouterTree, callback) => { // 判断是否有效的数组,且长度大于0[再去递归才有意义] let isValidArr = value => value && Array.isArray(value); let isValidArrChild = value => value && value.children && Array.isArray(value.children) && value.children.length > 0; function recursive(Arr) { if (isValidArr(Arr)) { return Arr.map(ArrItem => { if (isValidArrChild(ArrItem)) { return ( <SubMenu key={ArrItem.key} title={ <div> {ArrItem.icon ? <Icon type={ArrItem.icon} theme="outlined" /> : null} <span>{ArrItem.text}</span> </div> } > {recursive(ArrItem.children)} </SubMenu> ); } return ( <Item key={ArrItem.key} onClick={() => callback(ArrItem)}> {ArrItem.icon ? <Icon type={ArrItem.icon} theme="outlined" /> : null} <span>{ArrItem.text}</span> </Item> ); }); } } return recursive(RouterTree); }; 复制代码
-
callback
(我这里是我的跳转函数)
// 路由跳转 gotoUrl = item => { const { history, location } = this.props; this.setState({ selectedKeys: [item.key], }); if (location.pathname === item.path) { return; } else { history.push(item.path); } }; 复制代码
用法
// 我自己维护的静态路由 import RouterTree, { groupKey, findKey } from './RouterTree'; <Sider breakpoint="lg" collapsed={collapsed} width="160" style={{ backgroundColor: `${theme ? '#001529' : '#fff'}` }} onCollapse={this.toggleCollapsed} > <Logo collapsed={collapsed} mode={mode} theme={theme} /> <Menu inlineIndent={12} subMenuOpenDelay={0.3} theme={theme ? 'dark' : 'light'} openKeys={openKeys} mode="inline" selectedKeys={selectedKeys} onOpenChange={this.onOpenChange} > {this.sidebarTree(RouterTree, this.gotoUrl)} </Menu> </Sider> 复制代码
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- 数组常见的遍历循环方法、数组的循环遍历的效率对比
- C++拾趣——STL容器的插入、删除、遍历和查找操作性能对比(Windows VirtualStudio)——遍历和删除
- WindowsXamlHost:在 WPF 中使用 UWP 控件库中的控件
- WindowsXamlHost:在 WPF 中使用 UWP 控件库中的控件
- Js遍历数组总结
- 遍历
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
应用随机过程教程及在算法和智能计算中的随机模型
龚光鲁 / 清华大学出版社 / 2004-3 / 42.00元
应用随机过程教程及在算法和智能计算中的随机模型,ISBN:9787302069485,作者:龚光鲁,钱敏平著一起来看看 《应用随机过程教程及在算法和智能计算中的随机模型》 这本书的介绍吧!