react中tab切换的几种方式效果

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

代码为：

import React,{ Component } from 'react';
import './index.scss';
import axios from 'axios';
class App extends Component{
    constructor(props){
        super(props);
        this.state={
            datalist:{},
            tabs:[
              {tabName:'取票',icon:'icon-compass',id:1},
              {tabName:'3D',icon:'icon-success',id:2},
              {tabName:'停车',icon:'icon-operation',id:3},
              {tabName:'优惠',icon:'icon-trade',id:4},
              {tabName:'交通',icon:'icon-component',id:5}
            ],
            currentindex:1,
            tabContent:'',
        }
    tabChoiced(id){
        this.setState({
            currentindex:id
        });
        switch(id){
            case 1:
              this.setState({
                  tabContent:'取票暂时没有'
              });
              break;
            case 2:
              this.setState({
                  tabContent:'3D暂无信息'
              });
              break;
            case 3:
              this.setState({
                   tabContent:'停车暂无信息'
              });
              break;
            case 4:
              this.setState({
                   tabContent:'优惠暂无信息'
              });
              break;
            case 5:
              this.setState({
                   tabContent:'交通暂无信息'
              });
              break;
        }
    }
      render(){
        // console.log(this.props)
        var _this=this;
        var tabList=this.state.tabs.map(function(res,index){
            // 遍历标签页，如果标签的id等于tabid，那么该标签就加多一个active的className
            var tabStyle=res.id==this.state.currentindex ? 'col-xs-2 active' : 'col-xs-2';
            return <li className={tabStyle} key={index} onClick={this.tabChoiced.bind(_this,res.id)}>
                       <div className="li-w">
                            <div className="li-warp"><i className={"iconfont img_top " + res.icon}></i><i className={"iconfont img_bot " + res.icon}></i><span>{res.tabName}</span></div>
                        </div>
                    </li>
        }.bind(_this));
          return (
          <div className="cinema-view cinema-detail-view">
                            <div className="row other-detail-box">
                    <ul className="list-inline clearfix">
                        {tabList}
                    </ul>
                    <div className="li-box">
                        <p>{this.state.tabContent}</p>
                    </div>
               </div>
                  </div>
        )
    }
}
export default App;

其他代码为：

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;

本地效果为：http://localhost:8095/cinedetail/1091

原文链接：http://www.mamicode.com/info-detail-1422650.html