前言

隨著側邊欄的東東越來越多..本來不考慮的三級選單,也需要考慮進去了;

一開始都是手動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