背景

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页签相关推荐

react ant design pro typescript springboot activiti权限、工作流框架
是什么? 使用springboot,activiti,mybatis,react,ant design pro,typescript 开发的后台管理系统(包含权限管理.工作流等功能),真正前后端分离的 ...
React Ant design pro 访问服务器接口，获取数据显示
React Ant design pro 访问服务器接口一.前两天更新了Ant design pro环境搭建,需要了解的小伙伴可以看一下之前的内容,还有react基础教程噢. 二.框架搭建完后,一般 ...
Ant Design Pro项目启动报错 ChunkError mf-va_remoteEntry umi
版本: Ant Design Pro 5,typescript 背景: 有个项目写完,后期等待沟通,于是去做了其他项目.回头再来看这个项目时,无法启动,删除node_modules也无法启动. 解决办 ...
Ant Design Pro模板无多标签页解决方案
白嫖了无尽岁月,我也来写个博客.希望能帮到你! 网上一些方案都是把官方模板替换成自己写的.本人的方案是在模板的基础上进行添砖加瓦,理解起来更容易! 解决思路是: 记录页面切换时的路由(onPageCh ...
Ant Design Pro 项目图表组件点击事件
背景:使用框架配套图表组件charts 要求柱形图可实现点击事件方法:onReady 官网:https://charts.ant.design/zh/docs/api/options/events ...
【Error】初始化ant design pro项目时遇到“pro 不是内部或外部命令”
解决办法: 将 pro create myapp 改为 npx pro create myapp 即可解决
Linux部署Ant Design Pro项目及nginx部署
通过umi命令进行构建通过umi命令进行构建,构建成功后悔生成静态页面: nginx部署生成的静态页面需要通过nginx进行访问,并且请求数据的代理也需要通过nginx进行代理: ①安装nginx ...
Ant Design Pro 开启默认进入登录页
src/utils/authority.js getAuthority方法中 return authority || ['admin']; 改为 return authority || ['guest ...
Ant Design Pro V4下载运行
简介:Ant Design Pro是阿里巴巴旗下蚂蚁金服开源的中台前端/设计解决方案,官网. 一.下载安装 1.1 前序准备你的本地环境需要安装 yarn.node 和 git.我们的技术栈基于 E ...

React + Ant Design Pro项目实现keep-alive页签

背景

调研

实现

1. 创建 BaseLayout 和 BaseTabs 两个组件

2. 将BaseLayout应用起来

React + Ant Design Pro项目实现keep-alive页签相关推荐

最新文章

热门文章