[讨论] 如何花最小的成本实现多Tabs切换模式

[xiaohuoni]

相关讨论：#220

道理都懂，但有时候需求下来很难推掉。
昨天有一个朋友在群里问，有一点想法，所以今天搞了一个不是很好的方案。
有需要的朋友可以参考一下。
源码：@alitajs/tabs-layout/

前置条件

umi@3

已知BUG

嵌套路由的页面无法状态保持，但可以多tabs切换（不能状态保持的多tabs有什么意义？）
可能会修也可能不会，因为我们在真实项目中，嵌套路由用的比较少。

演示效果

最小成本

比如将pro项目改成多 Tabs ，只改需要10行代码。详情可以查看 alitajs/umi-antd-pro@c75e3a6

安装

yarn add @alitajs/tabs-layout

配置

export default {
  plugins:['@alitajs/tabs-layout'],
  tabsLayout: [/./], // 这里表示所有的页面
};

tabsLayout 是一个数组，写明需要使用 tabs 的页面，支持字符串和正则表达式，如需要全部匹配，可以设置 tabsLayout: [/./]。

使用

需要使用 TabsLayout 替换 children。

import React from 'react';
import { TabsLayout } from 'alita';

const BasicLayout: React.FC = props => {
  return (
    <div>
-     { props.children }
+     <TabsLayout {...props}/>
    </div>
  );
};

export default BasicLayout;

[chenshuai2144]

umi 会支持 keep live ，到时候给layout 来个 pr，一键支持

[xiaohuoni]

我也在等umi的keep alive 😊

[shaohuatsou]

mark

[wellenzhong]

嵌套路由的状态可以用model存下来，匹配路由后再去model里找，而不是重新生成组件。
我现在的方案的坑是，页内链接带参数跳转到新的tab,然后点返回或者浏览器点后退，参数丢失，或者参数不丢失，但组件拿不到参数各种问题。

[fainle]

mark

[gclsoft]

@xiaohuoni 看了演示网站,切换标签很卡, 没有iframe流畅

[lanweifeng]

mark

[MudOnTire]

新鲜出炉，欢迎体验：https://github.com/MudOnTire/antd-pro-page-tabs

完美保持tab中的状态。