react滑动切换tab动画效果_【原】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