在react項(xiàng)目中，這段代碼有多個div，我希望能優(yōu)化下這段代碼，請問如何修改？

前面的答案都沒有將className與style處理。

export default () => {
  const divList = [{clazz: 'allTasks', name: '全部任務(wù)'}, {clazz: 'handleVclazzeo', name: '待處理視頻'}, {clazz: 'passVclazzeo', name: '已通過視頻'}, {clazz: 'misdeedVclazzeo', name: '違規(guī)視頻'}, {clazz: 'dataAnalysis', name: '數(shù)據(jù)分析'}];

  return (
    <div className={'vclazzeo'}>
      {
        divList.map((div, index) => {
          return (
            <div
              className={`${div.clazz} fl`}
              style={
                this.state.current === index ? changeColor : changeColor02
              }
              onClick={(event) => this.handleClickLi(index, event)}
            >
              {div.name}
            </div>
          );
        })
      }
    </div>
  );
}

將重復(fù)代碼抽成組件是最基本的重構(gòu)方法，直接看代碼好了

const list = [ { name: "全部任務(wù)" },{ name: "待處理視頻" },{ name: "已通過視頻" },{ name: "違規(guī)視頻" } ]
const block =(current, name) => <div
       className={'misdeedVideo fl'}
       onClick={(event) => this.handleClickLi(3, event)}
       style = {this.state.current === current ? changeColor : changeColor02}
        >
          {name}
</div>

render() {
    return <div>
        {
            list.map((item))=> block(this.state.current, item.name)
        }
    </div>
    
}

// datalist
const dataList = [
    {
        name: '全部任務(wù)'
    },
    {
        name: '待處理視頻'
    },
    {
        name: '已通過視頻'
    },
    {
        name: '違規(guī)視頻'
    },
    {
        name: '數(shù)據(jù)分析'
    }
]

// map
dataList.map((item, index) => {
    const Props = {
        className: 'allTasks fl',
        style: this.state.current === index ? changeColor : changeColor02,
        onClick: e => this.handleClickLi(index, e)
    } 
    return <div {...Props}>{item.name}</div>
})

const list = [ { name: "全部任務(wù)" },{ name: "待處理視頻" },{ name: "已通過視頻" },{ name: "違規(guī)視頻" } ]
...
{list.map((item))=> {
    return (
        <div
           className={'misdeedVideo fl'}
           onClick={(event) => this.handleClickLi(3, event)}
           style = {this.state.current === 3 ? changeColor : changeColor02}
            >
              {item.name}
        </div>
    )
    }
}

至于那些參數(shù)一樣的道理