React实现类似淘宝tab居中切换效果的示例代码

const label = {
 lettersort: false,
 paramname: "label",
 paramid: 0,
 title: "车源列表筛选项",
 option: [{
   value: 1,
   text: "全部"
  },
  {
   value: 2,
   text: "本地求购"
  },
  {
   value: 3,
   text: "精准收车"
  },
  {
   value: 4,
   text: "全国收车"
  },
  {
   value: 5,
   text: "同行询价"
  },
  {
   value: 6,
   text: "可批可售"
  },
  {
   value: 7,
   text: "车抵贷款"
  },
  {
   value: 8,
   text: "消费贷款"
  },
  {
   value: 9,
   text: "商家库容"
  },
  {
   value: 10,
   text: "代理合作"
  },
  {
   value: 11,
   text: "过户转籍"
  },
  {
   value: 12,
   text: "寻车拖车"
  },
  {
   value: 13,
   text: "解压抵押"
  },
  {
   value: 14,
   text: "抵押核验"
  }
 ]
}
filterDom = () => {
  let filterJson = label;
  let arr = filterJson.option;
  return (
    <div ref="filterBar" className="filter-list">
      {arr.map((item, index) => {
        if (item.value == this.state.filterSelect) {
          return (
            <div
              ref={item.value}
              className="filter-item active"
              key={index}
              value={item.value}>
              {item.text}
              <div className="zhishi"></div>
            </div>
          );
        } else {
          return (
            <div
              className="filter-item"
              onClick={() => {
                this.filterBarClick(item);
              }}
              ref={item.value}
              key={index}
              value={item.value}>
              {item.text}
            </div>
          );
        }
      })}
    </div>
  );
};
render(){
 return(
  <div>
   ...
   <div className="filter-content" style={{ display: this.state.filterBarShow }}>
     {this.filterDom()}
     <div className="shadow"></div>
     {/ 按钮和占位