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

一、图片

二、代码

import React, { Component } from \"react\";
import {   } 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 (
        <div className={styles.header}>
          <div className={styles.header_content}>
            <div className={styles.header_left}>
              <  to=\"\"> <div    ={() => { this.setState({currentIndex : 0})}}     className={ this.check_tittle_index(0) }>首页</div> </ >
              <  to=\"operate\"> <div   ={() => { this.setState({currentIndex : 1})}}  className={ this.check_tittle_index(1) } >智慧运营</div>  </ >
              <  to=\"station\"> <div   ={() => { this.setState({currentIndex : 2})}}   className={ this.check_tittle_index(2) }>智慧场站</div> </ >
            </div>
            <div  className={styles.tab }>无锡华润燃气数据可视化平台</div>
            <div className={styles.header_right}>
              <  to=\"service\"> <div    ={() => { this.setState({currentIndex : 3})}}  className={ this.check_tittle_index(3) }>智慧服务</div> </ >
              <  to=\"decision\"> <div   ={() => { this.setState({currentIndex : 4})}}  className={ this.check_tittle_index(4) }>智慧决策</div> </ >
            </div> 
          </div>
        </div>
      )
    }
  }
  
export default commonHeader