简述tabs react组件的简单实现

在DOM操作时代,tabs的结构一般如下:

div.tabs 
    ul.tabs-hd
        li.hd-tt*n
    div.tabs-bd
        div.bd-con*n

然后通过判断li.hd-tt的索引值来控制对应的div.bd-con的显示隐藏,由此封装成一个非常高效率的组件。

到了以React为代表的数据变化引起UI更新的时代,基于上面方式实现的tabs组件还是非常多的,以Ant Design,IMUI为例,都是这种实现方式。

那么现在我的问题是:在React中,tabs组件是否真的还需要按照这种显示隐藏多个div.bd-con的方式?

关于这个问题,这里抛出两个支撑观点:

  • 在使用tabs组件的时候,需要维护一个state来控制各个tab的切换
  • 一般来说各个tab的内容结构多半相似甚至相同,只是数据不同而已

基于这两点,简化版本的tabs其实只需要ul.tabs-hd部分,对于内容部分,根本不需要放到tabs里面去封装成组件

<TabsHd list=['标题1', '标题2', '标题3']>
<div class="content">
    { this.state.tabIndex  === 0 && <div className="">我是标题1对应内容的特殊部分</div> }
    <CommonComponent data={ this.props.tabsContentData } />
    { this.state.tabIndex  === 1 && <div className="">我是标题2对应内容的特殊部分</div> }
    { this.state.tabIndex  === 2 && <div className="">我是标题3对应内容的特殊部分</div> }
</div>

如果结构一样,直接一次搞定,每次点击切换数据更新props的tabsContentData即可,如果各个tab内容有特殊的东西,那也没有关系,可以基于state进行判断输出。

所以tabs组件,到了React这里,其实已经不需要考虑那么复杂了,该怎么简单就怎么来吧。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏walterlv - 吕毅的博客

用 AppContext 解决类库的更新兼容问题

2017-09-30 15:45

591
来自专栏java一日一条

Java EE7和Maven工程入门(1)

在日常工作中,我经常需要解决许多简单的或者是复杂的Maven/Java EE工程结构的问题。为了找到解决办法,我经常要拿项目的结构做实验,在不同应用服务器上对部...

211
来自专栏aCloudDeveloper

Kubernetes 笔记 02 demo 初体验

从前面的文章我们知道,Kubernetes 脱胎于 Google 的 Borg,Borg 在 Kubernetes 诞生之初已经在 Google 内部身经百战 ...

864
来自专栏北京马哥教育

[诀窍]上G文件双机互传首选工具BBCP

由来: 局域网双机拷贝单个大文件 【200G大小】,不要问我是啥! 也不要问我为毛会生成那么大的单文件,事实就是这样!然后就开始了操蛋之旅!再次做下记录备忘! ...

3185
来自专栏拂晓风起

cocos2d-js 小游戏 hungry-hero (原版是flash starling)

732
来自专栏SDNLAB

“访问限制”&“代理访问”实验

前言: 第三届SDN创新大赛又悄悄临近了,第二届大赛时做的题目积压在电脑里实在可惜,因此简单整理,拿出来和大家分享,从代码到实验过程,比较详尽,可以供初学者参考...

33310
来自专栏极客编程

ionic入门之AngularJS扩展

ionic是一个强大的混合式/hybridHTML5移动开发框架,特点是使用标准的HTML、 CSS和JavaScript,开发跨平台(目前支持:Android...

681
来自专栏君赏技术博客

如何快速制作支持源码和 Framework 切换的 Cocoapods 库

前往小专栏查看全部 https://xiaozhuanlan.com/topic/0278956314

862
来自专栏张善友的专栏

Visual Studio Code v0.9.1 发布

微软的跨平台编辑器 Visual Studio Code v0.9.1 已经发布,官方博客上发布文章Visual Studio Code – October U...

1697
来自专栏老马寒门IT

09Vue.js快速入门-Vue入门之Vuex实战

9.1. 引言 Vue组件化做的确实非常彻底,它独有的vue单文件组件也是做的非常有特色。组件化的同时带来的是:组件之间的数据共享和通信的难题。 尤其Vue组件...

2489

扫码关注云+社区