React 16.x折騰記 - (11) 結合Antd菜單控件(遞歸遍歷組件)及常規優化

前言

隨着側邊欄的東東愈來愈多..原本不考慮的三級菜單,也須要考慮進去了;

一開始都是手動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> 複製代碼

總結

有不對之處請留言,會及時修正,謝謝閱讀.