React 标签页组件

import React from \'react\';
import Style from \'@/commonality/queryTime/Ti bs.less\'

class Ti bs 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   = {
      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}  ={this.handleClick.bind(_this, e.id)} className={tabStyle} style={ }>  
      {/**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 Ti bs