【原】react做tab切换的几种方式

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

最近搞一个pc端的活动，搞了一个多月，甚烦，因为相比于pc端，更喜欢移动端多一点。因为移动端又能搞我的react了.

今天主要总结一下react当中tab切换的几种方式，因为tab切换基本上都会用到。当然，你也可以在react当中用jquery或者zepto来实现，不过既然都用react了，能不能用jq,就尽量不用jq。不过不得不吐槽一下，在jquery很简单的东西，在react中稍微复杂化了一点。

目前我用到的tab切换只有两种方式，所以暂时总结这两种，以后有遇到其他的再总结。

第一种、只是子标签在换，内容的布局不换。类似于下面这种

这类的切换只需要点击上面的标签，发送不同的请求而已，下面内容的布局都是一样的。

第二种就是标签页和内容都需要切换的，也是比较常见的这种。如下

Talk is cheap. Show me the code (觉得比较有意思的翻译是：废话少说，放码过来)

第一种，只是tab标签切换的方式

import React from 'react';class NewsList extends React.Component { constructor(props) {
super(props);
this.state = {
tabs:[
{tabName:"热点新闻",id:1},
{tabName:"合作播报",id:2},
{tabName:"行业咨询",id:3},
{tabName:"运营攻略",id:4}
],
currentIndex:1,
};
}
componentDidMount() { }
tabChoiced=(id)=>{
// tab切换的方法
this.setState({
currentIndex:id
});
}
render(){
var _this=this;
var tabList= this.state.tabs.map(function(res,index) {
// 遍历标签页，如果标签的id等于tabid，那么该标签就加多一个active的className
var tabStyle=res.id==this.state.currentIndex ? 'subCtrl active' : 'subCtrl'; return <li key={index} onClick={this.tabChoiced.bind(_this,res.id)} className={tabStyle}>{res.tabName}</li> }.bind(_this));
return (
<div className="listWrap">
<ul className="subNavWrap">
{tabList}
</ul>
<div className="newsList">
{/**这里通用的新闻列表**/}
</div>
</div>
)
}
}export default NewsList;

首先我们初始化已给tab标签的数组，并给数组里面的每一项加个id，然后设置一个当前显示第几个的currendIndex.然后将标签遍历出来，如果该标签的id等于currendIndex，那么就加多一个active的className,否则没有。从而实现点击标签，显示高亮的状态

每次点击新的标签，都会将该标签对应的id传过去，从而让currendIndex等于被点击的标签的id。比如点击了id为2的标签，这样下次遍历的时候currendIndex也等于2了，从而让第二个处于高亮，从而实现tab的切换。

第二种，内容随着标签一起切换

这个也是比较常见的。暂时我这里有两种方法实现。

方法1：在前面只是标签切换形式上改进一下：

import React from 'react';class NewsList extends React.Component { constructor(props) {
super(props);
this.state = {
tabs:[
{tabName:"社会新闻",id:1},
{tabName:"体育世界",id:2},
{tabName:"娱乐圈",id:3},
],
currentIndex:1,
};
}
componentDidMount() { }
tabChoiced=(id)=>{
//tab切换到方法
this.setState({
currentIndex:id
});
}
render(){
var _this=this;
var isBox1Show=this.state.currentIndex==1 ? 'block' : 'none';
var isbox2Show=this.state.currentIndex==2 ? 'block' : 'none';
var isbox3Show=this.state.currentIndex==3 ? 'block' : 'none'; var tabList= this.state.tabs.map(function(res,index) {
// 遍历标签页，如果标签的id等于tabid，那么该标签就加多一个active的className
var tabStyle=res.id==this.state.currentIndex ? 'subCtrl active' : 'subCtrl'; return <li key={index} onClick={this.tabChoiced.bind(_this,res.id)} className={tabStyle}>{res.tabName}</li> }.bind(_this));
return (
<div className="listWrap">
<ul className="subNavWrap">
{tabList}
</ul>
<div className="newsList">
<div style={{"display":isBox1Show}} >
社会新闻
</div>
<div style={{"display":isBox2Show}}>
体育世界
</div>
<div style={{"display":isBox3Show}}>
娱乐圈
</div>
</div>
</div>
)
}
}export default NewsList;