前言
随着侧边栏的东东越来越多.. 本来不考虑的三级菜单, 也需要考虑进去了;
一开始都是手动 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>
总结
有不对之处请留言, 会及时修正, 谢谢阅读.
来源: https://juejin.im/post/5c20879451882569b0244891