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

相关文章

来自专栏FD的专栏

前端下半场:构建跨框架的 UI 库

跨框架的 UI 库,即前端 UI 库可以不经任何修改,直接能运行在 React、Angular、Vue 等框架上。

1021
来自专栏知晓程序

开发 | 掌握这 7 个要点,iOS 开发者也能快速入门小程序

1443
来自专栏繁花云

巧用js替换某些不能替换的文字

在运行某些程序时,作者为了保护版权,将版权文字进行了特殊处理,使得我们无法进行修改。

950
来自专栏从零开始学 Web 前端

从零开始学 Web 之 HTML(一)认识前端

前端对于网站来说,通常是指网页,网站的前台部分包括网站的表现层和结构层。因此前端技术一般分为前端设计和前端开发。

893
来自专栏杨俊标的专栏

【HTML插件】帮你100%还原设计

Contrast.js插件主要用于检验移动端Web重构还原度,由于大部分设计稿是基于iPhone6以上(1334 x 750)设计的,所以该插件比较适合用iPh...

2022
来自专栏练小习的专栏

从前端界面开发谈微信小程序体验

这段时间有幸加入了一个关于微信小程序的项目开发组,从无到有的根据文档自行学习了小程序的开发过程。

16.8K15
来自专栏ionic3+

【技巧】ionic3视频播放

一般视频的展示方式有两种:缩略图和直接播放,分别对应下面两种效果(可参考直播应用和今日头条视频):

1963
来自专栏Hongten

pygame系列_百度随心听_完美的UI设计

=====================================================

643
来自专栏腾讯社交用户体验设计

微信小程序初体验(上)

1412
来自专栏ytkah

微信小程序开发教程第五章:微信小程序名片夹详情页开发

今天加了新干货!除了开发日志本身,还回答了一些朋友的问题。 闲话不多说,先看下「名片盒」详情页的效果图: ? ? 备注下大致需求:顶部背后是轮播图,二维码...

3218

扫码关注云+社区