React 标签页组件

import React from 'react';
import Style from '@/commonality/queryTime/TimeTabs.less'

class TimeTabs extends React.Component {

  constructor(props) {
    super(props)
  }
  state = {
    tabs: [
      {name: '常用时间', id: 1},
      {name: '相对时间', id: 2},
      {name: '绝对时间', id: 3},
    ],
    currentIndex: 1
  }

  handleClick = (id) => {
    this.setState({
      currentIndex: id
    })
  }

  render() {
    const wrap = {
      fontFamily: 'NotoSansCJKsc-DemiLight',
      fontSize: '10px',
      color: '#C0C1C4',
      letterSpacing: '-0.24px',
      lineHeight: '16px',
      marginTop: '6px'
    }
    const frame = {
      height: '110px',
      width: '95px',
      textAlign: 'center',
      display: 'table'
    }
    const vertical = {
      display: 'table-cell',
      verticalAlign: 'middle'
    }
    let _this = this;
    let isBox1Show=this.state.currentIndex==1 ? 'block' : 'none';
    let isbox2Show=this.state.currentIndex==2 ? 'block' : 'none';
    let isbox3Show=this.state.currentIndex==3 ? 'block' : 'none';
    let tabList = this.state.tabs.map((e, i) => {
      let tabStyle = e.id === this.state.currentIndex ? `${Style.active}` : '';  //通过id进行切换
      let imgStyle = e.id === this.state.currentIndex                            //通过id进行切换图片
          ? `${require('../../assets/calendarBLue.png')}` 
          : `${require('../../assets/calendar.png')}`
      
  return (
    
  
      {/**this.handleClick.bind(_this, e.id)  handleClic(e.id) => {}*/}
      
      

        
        
{e.name}
 
      
    
  )
  
})

return (
  

    

      

        {tabList}
      
    
    

      

        1
      
  
      

        2
      
      

        3
      
    
  
   )
 }
}
export default TimeTabs

less 文件

.active {
  border-left: 4px solid #00BFF1;
  height: 110px;
  width: 95px;
  text-align: center;
  display: table;
  div {
    color: #00BFF1 !important
  }
}