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 (
    <li key={i} onClick={this.handleClick.bind(_this, e.id)} className={tabStyle} style={frame}>  
      {/**this.handleClick.bind(_this, e.id)  handleClic(e.id) => {}*/}
      
      <div style={vertical}>
        <img src={imgStyle}/>
        <div style={wrap}>{e.name}</div> 
      </div>
    </li>
  )
  
})

return (
  <div style={{ display: 'flex' }}>
    <div>
      <ul style={{ background: '#011024', width: '110px', padding: '0'}}>
        {tabList}
      </ul>
    </div>
    <div>
      <div style={{ display: `${isBox1Show}` }}>
        1
      </div>  
      <div style={{ display: `${isbox2Show}` }}>
        2
      </div>
      <div style={{ display: `${isbox3Show}` }}>
        3
      </div>
    </div>
  </div>
   )
 }
}
export default TimeTabs

less 文件

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