分享一下在 React + Umi + Ant Design Pro 的项目中,遇到的一些需求和问题的解决方案

(最近公司搬家,图片拍摄于公司旧址)

前言介绍

1、什么是umi

Umi 是一个可扩展的企业级前端应用框架,它以路由为基础,同时支持配置式路由和约定式路由,保证路由的功能完备,并以此进行功能扩展。Umi 还配以生命周期完善的插件体系,覆盖从源码到构建产物的每个生命周期,支持各种功能扩展和业务需求。Umi 提供了丰富的功能和灵活的扩展机制,使开发者能够快速构建高质量的前端应用。

官方网站:UmiJS - 插件化的企业级前端应用框架

2.什么是Ant Design Pro

Ant Design Pro 是基于 Ant Design 和 umi 的封装的一整套企业级中后台前端/设计解决方案,提供了丰富的组件和模板,可以快速搭建高质量的中后台系统。Ant Design Pro 还提供了丰富的开箱即用的功能,如权限管理、国际化、数据可视化、代码生成等,可以大大提高开发效率。Ant Design Pro 适用于各种类型的中后台系统,包括管理后台、数据分析平台、物联网控制台等。

官方网站:开箱即用的中台前端/设计解决方案 - Ant Design Pro

需求、问题的解决和实现方案

1、首页隐藏侧边栏,其他页面展示侧边栏(登录页除外)

效果图展示

代码实现,在 <math xmlns="http://www.w3.org/1998/Math/MathML"> a p p . t s x \color{red}{app.tsx} </math>app.tsx中,有个 <math xmlns="http://www.w3.org/1998/Math/MathML"> o n P a g e C h a n g e \color{red}{onPageChange} </math>onPageChange函数,该函数会在页面切换时触发,我们可以在该函数触发时,根据url地址判断当前是那个页面,如果是首页就可以用css+js去隐藏侧边栏。其它页面再让侧边栏显示。

代码片段

js 复制代码
      const doc = document.getElementsByClassName("ant-layout-sider")[0]
      const previousSibling = doc?.previousElementSibling;
        if(history.location.pathname==="/welcome"){
          if(doc){
          doc.style.display = "none"
          }
          if(previousSibling){
          previousSibling.style.display = "none"
          }
        }else{
          if(doc){
          doc.style.display = "block"
          }
          if(previousSibling){
          previousSibling.style.display = "block"
          }
        }

2、tabs 多页签

效果图展示

代码实现,原来 Ant Design Pro 内置了多 tabs 布局,只需要在config.ts中开启就行。但是这个内置多页签的功能官方文档上并没有写,我是参考了一些文章才找到这个功能的。

文章地址:网友需求 - Ant Design Pro 内置的多 tabs 布局 - 掘金 (juejin.cn)

我也发现了,有些文章是手写的多页签功能,我之前参考该文章实现过。

文章地址1:几十行实现 Ant Design Pro v6 的多页签功能 - 掘金 (juejin.cn)

文章地址2:手把手带你基于ant design pro 5实现多tab页(路由keepalive) - 掘金 (juejin.cn)

代码片段

js 复制代码
  //tabs多页签
  keepalive: [/./],
  tabsLayout: {
  hasDropdown: true, //有右侧下拉菜单
  hasFixedHeader:true, //吸顶效果
  },

3、页面整体布局调整

代码实现

js 复制代码
  body{
  zoom: 80%;
  }

4、umi3升级到umi4

location 中的 query 找不到?

location 中的 query 不再支持了,后续推荐用 search

js 复制代码
- const { query } = history.location;

+ import { parse } from 'query-string';

+ const query = parse(history.location.search);

官网地址:升级到 Umi 4 (umijs.org)

5、重定向菜单的高亮

参考官网地址:菜单的高级用法 - Ant Design Pro

新增路由 /Son 和 /list 是同级关系

正常效果,路由跳转到 /Son ,菜单查询表格取消高亮

路由/son 增加 <math xmlns="http://www.w3.org/1998/Math/MathML"> p a r e n t K e y s \color{red}{parentKeys} </math>parentKeys

效果展示

可以看到 增加了 <math xmlns="http://www.w3.org/1998/Math/MathML"> p a r e n t K e y s \color{red}{parentKeys} </math>parentKeys 后,查询表格页面的高亮并没有消失。

如果是动态路由,前端就需要和后端商量怎么去处理 <math xmlns="http://www.w3.org/1998/Math/MathML"> p a r e n t K e y s \color{red}{parentKeys} </math>parentKeys 的问题了。

相关推荐
GISer_Jing4 小时前
React核心功能详解(一)
前端·react.js·前端框架
FØund4047 小时前
antd form.setFieldsValue问题总结
前端·react.js·typescript·html
疯狂的沙粒7 小时前
如何在 React 项目中应用 TypeScript?应该注意那些点?结合实际项目示例及代码进行讲解!
react.js·typescript
鑫宝Code8 小时前
【React】React Router:深入理解前端路由的工作原理
前端·react.js·前端框架
沉默璇年17 小时前
react中useMemo的使用场景
前端·react.js·前端框架
红绿鲤鱼19 小时前
React-自定义Hook与逻辑共享
前端·react.js·前端框架
loey_ln21 小时前
FIber + webWorker
javascript·react.js
zhenryx21 小时前
前端-react(class组件和Hooks)
前端·react.js·前端框架
老码沉思录1 天前
React Native 全栈开发实战班 - 性能与调试之打包与发布
javascript·react native·react.js
沉默璇年1 天前
react中Fragment的使用场景
前端·react.js·前端框架