简述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 条评论
登录 后参与评论

相关文章

来自专栏喵了个咪的博客空间

PhalGo-ADM思想

#PhalGo-ADM思想 关于ADM思想主要是指在API开发中使用API,Domain和Model三层结构,PhalGo从PhalApi中学习并且推崇这种设计...

3579
来自专栏Java工程师日常干货

实现一个迷你版的RPC前言动手实现RPC

在实际后台服务开发中,比如订单服务(开发者A负责)需要调用商品服务(开发者B负责),那么开发者B会和A约定调用API,以接口的形式提供给A。通常都是B把API上...

753
来自专栏北京马哥教育

Linux下六个有关file使用的实例

云豆贴心提醒,本文阅读时间4分钟 简介 file的官方解释是: 1.file - determine file type 是可以识别文件类型的意思,也可用来...

4009
来自专栏Fundebug

2020年如何写一个现代的JavaScript库

我写过一些开源项目,在开源方面有一些经验,最近开到了阮老师的微博,深有感触,现在一个开源项目涉及的东西确实挺多的,特别是对于新手来说非常不友好

1155
来自专栏码云1024

托管C++、C++/CLI、CLR

2904
来自专栏Android小菜鸡

Android原生与H5通信

  如今,混合开发似乎成为了主流。H5拥有跨平台的优势,却存在性能上的问题正好可以用搭建原生壳承载H5代码的方式去解决。   如何理解这种方式,就好像说And...

792
来自专栏菩提树下的杨过

flex4/flash builder中动态加载Module并与之交互的正确方式

关于flex中动态加载Module的文章,网上有很多,但多半是基于flex3的,如果在flash builder/flex4中按他们所提供的方法去做,最后将mo...

1697
来自专栏Python小屋

Python批量判断IP地址所属地区

首先安装Python扩展库netaddr,然后对下面的代码进行简单修改后即可满足某些场合的应用。 from random import randrange fr...

3377
来自专栏玄魂工作室

【译】JavaScript的工作原理:引擎,运行时和调用堆栈的概述

随着javascript变得越来越流行,很多团队的技术栈都开始使用它,比如前端、后端、hybrid、嵌入式设备等。

653
来自专栏编程

看书的时候如何调试书中简单的C+代码?

代码看一百遍不如写一遍来的印象深刻,不管写C++还是Python,抑或别的语言,我们在看编程类书籍的时候面对一堆代码会很痛苦,硬着头皮啃完一本书可能会有所收获,...

1996

扫码关注云+社区