用React实现点击切换的标签页

一、图片

二、代码

import React, { Component } from "react";
import { Link } from "react-router-dom";
import styles from './CommonHeader.less'
class commonHeader extends  Component{
     //      首页
     //operate   智慧运营
     //station  智慧场站

   
    //service  智慧服务
    //decision   智慧决策


    constructor(){
      super();
      this.state={ 
          currentIndex : 0
      };
    }

    check_tittle_index(index){
        return index===this.state.currentIndex ? `${styles.tabItem}  ${styles.tabItem_active}` : `${styles.tabItem}`;
    }

    render() {
      return (
        

          

            

               
 { this.setState({currentIndex : 0})}}     className={ this.check_tittle_index(0) }>首页
 
               
 { this.setState({currentIndex : 1})}}  className={ this.check_tittle_index(1) } >智慧运营
  
               
 { this.setState({currentIndex : 2})}}   className={ this.check_tittle_index(2) }>智慧场站
 
            
            
无锡华润燃气数据可视化平台
            

               
 { this.setState({currentIndex : 3})}}  className={ this.check_tittle_index(3) }>智慧服务
 
               
 { this.setState({currentIndex : 4})}}  className={ this.check_tittle_index(4) }>智慧决策
 
            
 
          
        
      )
    }
  }
  
export default commonHeader