背景

PC端管理系統，采用?ant design pro?方案，它是阿里的一個管理系統框架，技術棧是react。

相比vue，react一個先天不足是不支持 keep-alive，所以管理系統中的多頁簽功能難以實現。

調研

由于官方不支持，只能網上尋找各方大佬的開源插件。

目前選擇的是?umi-plugin-keep-alive?，它是在?react-activation?基礎上，針對阿里自己的?umi?進行的定制化封裝，antd pro 核心也是 umi 技術，所以 umi-plugin-keep-alive 與 antd pro 可以完美搭配。

實現

插件找到了，接下來的難點是對框架的改造。

由于 ant design pro 封裝的很厲害，操作靈活性并不高，以下是改造的一個思路。

1. 創建 BaseLayout 和 BaseTabs 兩個組件

這一步是標簽頁與緩存的實現

// BaseTabs/index.tsx import { Tabs } from 'antd'; import React from 'react'; import { useAliveController, useHistory, useLocation } from 'umi'; const { TabPane } = Tabs;export default (): React.ReactElement => {const { pathname } = useLocation();const history = useHistory();// 獲取緩存列表const { getCachingNodes, dropScope } = useAliveController();const cachingNodes = getCachingNodes();/*** 點擊tab，跳轉頁面*/const clickTab = (path: string) => {history.push(path);};/*** 關閉tab，銷毀緩存*/const editTab = (path: any) => {dropScope(path);// 關閉當前頁面，需跳轉到其他頁簽if (path === pathname) {const index = cachingNodes.findIndex((item) => item.name === path);if (index > 0) {history.push(cachingNodes[index - 1].name as string);} else {history.push(cachingNodes[1].name as string);}}};return (<Tabstype="editable-card"hideAddsize="small"activeKey={pathname}onTabClick={clickTab}onEdit={editTab}>{cachingNodes.map((node) => (<TabPane tab={node.tabName} key={node.name} closable={cachingNodes.length > 1} />))}</Tabs>); }; // BaseLayout/index.tsx import React from 'react'; import { KeepAlive } from 'umi'; import BaseTabs from '../BaseTabs';export default (props: any): React.ReactElement => {const { children, location } = props;const { pathname } = location;return (<><BaseTabs /><KeepAlive id={pathname} name={pathname} tabName={props.route.name}>{children}</KeepAlive></>); };

2. 將BaseLayout應用起來

這一步被卡了很久，不知道該怎么把功能和框架相關聯，原來需要在路由配置里加?wrappers 屬性，這個屬性官方文檔中沒有體現，翻閱了很多網上案例才找到，代碼如下。(這里是舉個例子，實際可以遍歷 routes統一加屬性)

這樣寫好后，系統就可以自動根據路由，完成緩存的功能了。?

總結

以上是生活随笔為你收集整理的React + Ant Design Pro项目实现keep-alive页签的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。