简述tabs react组件的简单实现

• 2019 年 12 月 4 日
• 筆記

在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这里，其实已经不需要考虑那么复杂了，该怎么简单就怎么来吧。