react tab切换功能

这里就不搞文字介绍了，直接实操上代码，冲！！！

state = {
    tabService: [
      {
        id: 1,
        tabName: '五分钟服务配套'
      },
      {
        id: 2,
        tabName: '工具箱'
      }
    ],
    currentIndexSercive: 1, // 定义tabName切换的初始值
    currentIndexNeighborhood: 1, // 定义切换列表的初始值
    // 工具箱items
    toolItem: [
      {
        id: 1,
        title: '医疗箱',
        count: '4个',
      },
      {
        id: 2,
        title: '千斤顶',
        count: '2个',
      },
      {
        id: 3,
        title: '防火面具',
        count: '56件',
      }
    ],
    serviceItem: [
      {
        id: 1,
        title: '运动场所',
        count: '5个',
      },
      {
        id: 2,
        title: '特色商店',
        count: '1家',
      },
      {
        id: 3,
        title: '特色餐饮',
        count: '2家',
      }
    ],
},
  // tab切换方法---服务
 tabChoicedService = (id) => {
    this.setState({
      currentIndexSercive: id
    })
 },


// 注意这里是render方法里面的代码
const { currentIndexSercive, currentIndexNeighborhood, currentNeighborhoodItem } = this.state

<div className='left-two'>
   <div className='left-two-title'>
      <div>5分钟服务配套&工具箱</div>
    </div>
    <div className='left-two-tab'>
        <div className='left-two-tab-title'>
           {
              this.state.tabService.map((item) => {
                 return <div key={item.id}>
                    <div className='left-two-tab-title-service' style={{ marginRight: '15px' }} onClick={() => this.tabChoicedService(item.id)}>
                      <div className={currentIndexSercive === item.id ? 'left-two-tab-title-tool' : ''}>{item.tabName}</div>
                      <div className={currentIndexSercive === item.id ? 'left-two-tab-title-tool-xian' : ''}></div>
                    </div>
                  </div>
                })
              }
            </div>
            {/* 工具箱列表 */}
            <div className={currentIndexSercive === 1 ? 'left-two-tab-tool-list' : 'active'}> // active的样式为display:none
              {
                this.state.serviceItem.map(v => {
                  return <div key={v.id}>
                    <div className='left-two-tab-tool-list-box'>
                      <div className='left-two-tab-tool-list-box-img'>
                        <img src={v.Url} width='30px' height='30px'></img>
                      </div>
                      <div className='left-two-tab-tool-list-box-title'>
                        <div>{v.title}</div>
                        <div>{v.count}</div>
                      </div>
                    </div>
                  </div>
                })
              }
            </div>
            <div className={currentIndexSercive === 2 ? 'left-two-tab-tool-list' : 'active'}> // active的样式为display:none
              {
                this.state.toolItem.map(i => {
                  return <div key={i.id}>
                    <div className='left-two-tab-tool-list-box'>
                      <div className='left-two-tab-tool-list-box-img'>
                        <img src={i.Url} width='30px' height='30px'></img>
                      </div>
                      <div className='left-two-tab-tool-list-box-title'>
                        <div>{i.title}</div>
                        <div>{i.count}</div>
                      </div>
                    </div>
                  </div>
                })
              }
          </div>
       </div>
    <div className='left-two-look-pian'></div>
  </div>