react中多tab组件

 index.jsx 页面

import React, { Component } from 'react';
import classname from 'classnames';
import './SliderTabs.less';
import unSelected from '未选中图片路径'
import Selected from '选中图片路径'
class SliderTabs extends Component {
  constructor(props) {
    super(props)
  }

  handleClickItem = (e, item, index) => {
    const { datas, activeTab, onTabClick} = this.props;
    const length = datas.length;

    // 滚动到的位置，如果点击当前后面的某个就让被点击的后面两个进入视口。如果点的是当前前面的某个
    // 就让被点击的前面两个滚动进视口 
    let scrollIndex = activeTab > index ? index - 2 : index + 2;

    // 边界判定
    if (scrollIndex > length - 1) {
      scrollIndex = length - 1;
    }
    if (scrollIndex < 0) {
      scrollIndex = 0;
    }

    const element = document.getElementsByClassName('search-type-item')[scrollIndex];

    // 使用behavior:smooth定义动画过渡效果。block:定义垂直对齐方向。inline:定义水平对齐方向。
    element.scrollIntoView({ behavior: '