基於React+Antd的多Tab架構

背景

企業後臺佈局常採用多tab的方式，便可經過不一樣tab之間的切換訪問已打開的頁面，以下圖所示。後臺管理系統中一種常見的場景爲從列表頁到詳情頁展現，多tab的形式可以更好的知足這種業務場景，尤爲在不一樣的tab頁有對比的狀況下。

實現方案

使用react-router的方式實現

咱們能夠經過每一個標籤記錄不一樣的路由的形式，即<tab, url>鍵值對的形式，記錄該標籤對應的路由，點擊不一樣的標籤時，在Content區域渲染相關的路由對應的組件來實現多tab。

可是這種方案有一個問題沒法繞開，那就是react-router是根據url來渲染單個組件的，沒法緩存已渲染的組件，這就意味着在點擊標籤時，對應的子組件每次都是從新渲染，沒法保存上次對應的狀態（React-router原理）。這對於純展現類的場景影響在可接受範圍內，如標籤對應的是新聞詳情頁，即便刷新也無大礙。但對於某種場景則存在很大的問題，如輸入型場景中，我在標籤1中輸入了部份內容，以後切換到標籤2中去查詢某個數據，再回到標籤1中，剛纔輸入的數據項則丟失。

若是React-router能夠緩存組件，即可解決這個問題。經過查詢react-router文檔發現並不支持，react中也沒有像vue中keep-alive的機制。業界中有react-keeper的路由方案代替react-router解決組件的緩存問題。

基於JQuery的方式實現

在React沒出現以前，在JQ中如何實現這種形式的呢？用JQ的方式是比較容易實現的，只須要將標籤對應的內容的css設置爲{display: block}，其餘標籤對應的內容css設置爲{display: none}便可。

基於Antd Tab組件實現

Antd tab組件實現了上述所說的JQ相似的功能，示例以下：

import {Tabs, Button} from 'antd';
const {TabPane} = Tabs;
ReactDOM.render( <
    <Tabs activeKey="1" >
        <TabPane tab = "Tab 1" key = "1" >Content of tab 1 </TabPane> 
        <TabPane tab = "Tab 2" key = "2" >Content of tab 2 </TabPane> 
        <TabPane tab = "Tab 3" key = "3" >Content of tab 3 </TabPane> 
    </Tabs>,
    mountNode,
);
複製代碼

activeKey對應的TabPane會呈現，其餘TabPane則會隱藏掉。

首先設計Tab的數據結構：

{
    name,  // 該標籤名稱
    component, // 標籤對應的組件
    props， // 組件須要的屬性
}
複製代碼

在全局狀態中增長:

// 全局標籤列表
{
    tabs: [] // 全局tabs
}

// 對應的操做
export const ADD_TAB = 'ADD_TAB';
export const REMOVE_TAB = 'REMOVE_TAB';
export const UPDATE_TAB = 'UPDATE_TAB';
export const CHANGE_TAB = 'CHANGE_TAB';
export const CLEAR_TAB = 'CLEAR_TAB';
複製代碼

標籤的新增，關閉，更新等對應的就是tabs數組的以上操做。

代碼以下：github.com/simonwoo/mu…

效果以下圖：