antd-pro v5版本的tab页签最简实践

antd-pro v5版本的tab页签最简实践

前言

网上找了很多资料，也看了好些个代码，总觉得他们写的太累赘了。其实官方自己也说了，antdpro做页签和他们的产品理念不符合才不做，但是不代表他们没给我们预留修改空间，但是找了好多代码都没找到一个合适的插件。经过对layout组件的一番研究，但其实官方团队还是给我们预留了空间的，所以我也就是依据官方的预留空间做了一个最简实践，只需要写一个组件，加几行layout配置代码即可实现页签功能。

提醒

tab页签肯定是会存在性能问题的，就如同iframe一样，但是一般有这个需求的应该都不会太在乎性能问题。页签功能自行定义，我这里只是提供一个实现方案。还没有做细化功能的。并且该方案十分轻量，无任何累赘。感谢博主的文章antd pro(V5) 实现多tab，的代码给了我灵感，用了他仿element-admin的样式。

效果

核心的api

• childrenRender
  自定义children 右侧展示内容

import TagView from '@/components/TagView';

// ProLayout 支持的api 
// https://procomponents.ant.design/components/layout
export const layout: RunTimeLayoutConfig = ({ initialState }) => {
	// ...省略
    childrenRender: (children) => {
      return (
        <>
          {initialState?.currentUser && location.pathname !== loginPath ? (
            <TagView children={children} home="/welcome" />
          ) : (
            children
          )}
        </>
      );
    },
    // ...省略
}

• RouteContext
  拿到pro-layout提供的参数

import { RouteContext, RouteContextType } from '@ant-design/pro-layout';


// ...省略
<RouteContext.Consumer>
    {(value: RouteContextType) => {
      // console.log(value);
      routeContext.current = value;
      return null;
    }}
</RouteContext.Consumer>
// ...省略

组件代码

TagView 即为页签所需全部组件，非常轻量，黏贴即可用。

结语

如果有更好的方案请在下方评论区留言。码云代码地址 ，后面也会抽时间优化这个小组件，毕竟需求量挺大的。github真是在哪都没法安心访问，上传个代码老报443