在react项目中，这段代码有多个div，我希望能优化下这段代码，请问如何修改？

Question

<div className={'video'}>
                        <div
                            className={'allTasks fl'}
                            style = {
                                this.state.current === 0 ? changeColor : changeColor02
                            }
                            onClick={(event) => this.handleClickLi(0, event)}
                        >
                            全部任务
                        </div>
                        <div
                            className={'handleVideo fl'}
                            onClick={(event) => this.handleClickLi(1, event)}
                            style = {
                                this.state.current === 1 ? changeColor : changeColor02
                            }
                        >
                            待处理视频
                        </div>
                        <div
                            className={'passVideo fl'}
                            onClick={(event) => this.handleClickLi(2, event)}
                            style = {
                                this.state.current === 2 ? changeColor : changeColor02
                            }
                        >
                            已通过视频
                        </div>
                        <div
                            className={'misdeedVideo fl'}
                            onClick={(event) => this.handleClickLi(3, event)}
                            style = {
                                this.state.current === 3 ? changeColor : changeColor02
                            }
                        >
                            违规视频
                        </div>
                        <div
                            className={'dataAnalysis fl'}
                            onClick={(event) => this.handleClickLi(4, event)}
                            style = {
                                this.state.current === 4 ? changeColor : changeColor02
                            }
                        >
                            数据分析
                        </div>
                    </div>

Answer 1

前面的答案都没有将className与style处理。

export default () => {
  const divList = [{clazz: 'allTasks', name: '全部任务'}, {clazz: 'handleVclazzeo', name: '待处理视频'}, {clazz: 'passVclazzeo', name: '已通过视频'}, {clazz: 'misdeedVclazzeo', name: '违规视频'}, {clazz: 'dataAnalysis', name: '数据分析'}];

  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>
  );
}

Answer 2

const list = [ { name: "全部任务" },{ name: "待处理视频" },{ name: "已通过视频" },{ name: "违规视频" } ]
...
{list.map((item))=> {
    return (
        <div
           className={'misdeedVideo fl'}
           onClick={(event) => this.handleClickLi(3, event)}
           style = {this.state.current === 3 ? changeColor : changeColor02}
            >
              {item.name}
        </div>
    )
    }
}

至于那些参数一样的道理

Answer 3

// datalist
const dataList = [
    {
        name: '全部任务'
    },
    {
        name: '待处理视频'
    },
    {
        name: '已通过视频'
    },
    {
        name: '违规视频'
    },
    {
        name: '数据分析'
    }
]

// 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>
})

Answer 4

将重复代码抽成组件是最基本的重构方法，直接看代码好了

const list = [ { name: "全部任务" },{ name: "待处理视频" },{ name: "已通过视频" },{ name: "违规视频" } ]
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>
    
}