入坑React之五 框架修改经验之多TAB

由于是管理系统,多标签页应该算是一个常用方式。有了多标签页,使用者在使用这个系统进行日常工作时,就可以在同一个页面中进行多个业务功能模块之间切换,不必重新去找各个同的业务菜单重新打开。而且已经打开的tab页来回切换时,能各自保持原状态。

Ant Design 提供了TAB组件,我们就想办法看看如何引进来。

菜单必须有,这是用户寻找业务功能的入口。如果使用多tab,那么菜单点击的时候要完成两件事:

  • 如果当前没有对应的标签页,就新打开一个
  • 如果当前已经有了对应的标签页,就切换到那个标签页上

但是,在传统方式下,菜单上的链接是Link组件生成的,这个Link是路由提供的组件,用它生成的链接点击效果是:会激活路由,然后找到对应的Component,然后将这个组件作为children,传给该路由所在的父组件。然后,父组件重新渲染自己,把这个children放到对应的地方就好了。

如果有多TAB,就不能这么玩了。

我认为,我们必须有一个全局的tab列表,用来保存已经打开的tab。每个tab都有key的。然后有个对象用来记录当前活跃的tab的key。

所以,修改为:菜单点击的时候,还是走路由的那一套,拿到children,传给父组件。但是父组件就先别加载它了。

那父组件怎么做呢?

  1. 对于菜单增加点击事件,点击的时候,将菜单的url作为key,push进全局的tab列表。
  2. 对于菜单的点击事件,可以拿到当前活跃的location和children(注意拿到的是点击菜单之前的),不过这也没关系,起码location和children组件的对应关系是正确的。我们可以把location中的url提取出来,拿来和在tab列表中的key们对比,如果已存在,就将对应的key和这个children对应上,就完成了菜单项和里面的组件的对应。
  3. 但是,你肯定就会问了,这也的话,新打开的标签,从tab列表中找组件,肯定找不到啊。没关系,新打开的时候,除了点击事件,也走了路由了,也会将新路由对应的children组件传进来,我们在组件渲染的时候,直接将这个组件放到tab中就好了。
  4. 组件渲染:路由点击事件触发父组件重新渲染,同时传入children。所以,我们在父组件渲染的时候,生成TAB。根据tab列表中的元素生成所有标签页,活跃的标签页是根据当前活跃页的那个对象值确定。然后,如果这个列表中有children的,就把children放进去,如果没有children的,就拿父组件中当前的children放到标签页中去。
  5. 对于关闭还有切换的处理,注意写一下就好。

那到底具体是怎么实现的呢?

  1. 增加全局变量tabList。这是个对象,共其他文件用import方式引用。它里面包含一个列表,列表项是每个菜单的信息:包括key,name即标签上的中文显示名,children即tab页中的children组件,location,即该tab对应的location。
  2. 侧边栏的Menu组件传入点击事件方法。点击事件的方法在容器组件中实现。即,上面提到的父组件。这个方法接受当前链接为入参,同时获取到点击之前的当前children和location。然后dispatch到model中的新增tab方法实现。
  3. model中的新增tab方法:更新currentTab、判断tabList:如果没有就push进一个新的进去,如果没有children就把children放进去。并且判断当前是不是一个tab都没有。(如果没有tab,父组件渲染的时候会加载欢迎页)
  4. 在model中做了关闭tab的方法:与上面那个方法差不多相反,需要适当的从tablist中删元素。currentTab的设定原则是:如果关的不是活跃页则不变。如果关闭了活跃页,则找list中的它前面那个设为活跃页。

其他细节:

用routerRedux.push方式带参数进行路由重新调用时,期待是走一下model中的注册的方法,即用户点击业务菜单目录url后进行一次查询。这没问题。问题是,正常情况下,用户再点击目录菜单,则会进行一次无参数查询,这会导致我们的标签页的内容重置。如何防止?我的做法是:

  • 在目录中生成的链接url中,拼装上requery=false。当点击菜单时,所有requery是false的不查询。但是有例外:如果这时候这个菜单在tablist中没有children,那也是需要查一次的。
  • 如果业务需要routerRedux.push的方式引发查询,那么一定要把requery设为true。
  • 当requery是true的时候,如果没有children,也是不查的。因为如果你直接用requery=true来访问,而页面上是默认刷新的,这时没有标签页的,如果查了反而是浪费。
  • 后来又做了和目录的联动、以及解决iPad上点击目录时tab内容不正确的问题。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 215,634评论 6 497
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,951评论 3 391
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 161,427评论 0 351
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,770评论 1 290
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,835评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,799评论 1 294
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,768评论 3 416
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,544评论 0 271
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,979评论 1 308
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,271评论 2 331
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,427评论 1 345
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,121评论 5 340
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,756评论 3 324
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,375评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,579评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,410评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,315评论 2 352

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 172,036评论 25 707
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,089评论 4 62
  • 因为最近的一个项目用到了Retrofit2,所以也就用到了OkHttp3 ,因为Retrofit2 只支持OKHt...
    xingtangcunliu阅读 4,980评论 0 5
  • 北方沙尘天。百无聊赖翻到返校途中的心情,内心突然柔软。遂涂涂写写,愿给每个漂泊在外的我们,带来一丝温柔。 6点融进...
    少年叶安阅读 353评论 1 3
  • 夜色的灯光还没有黯去,如一条寂寞的长龙,独自在江面上横卧着。 暗影中,台风带起云层,快速的向北推进。推到北山之颠,...
    风儿轻轻阅读 238评论 0 4