React如何避免重复编写相似的列表项onClick事件

按照以下三步改造即可，不需要复杂的抽象设计：

1. 抽离所有重复项的差异配置
   你当前编写的列表项，除了展示文本、点击后设置的sortTitle值、触发的排序action函数不一样，其余点击逻辑完全重复。先把这些差异点整理成独立的配置数组，把对应的action引用存进去即可：

   const sortOptions = [
     {
       text: "Release Date",
       targetSortTitle: "Release Date",
       actionCreator: sortByReleaseDate
     },
     {
       text: "Rating",
       targetSortTitle: "Rating",
       actionCreator: sortByRating
     },
     {
       text: "Run Time",
       targetSortTitle: "Run Time",
       actionCreator: sortByRuntime
     },
     {
       text: "Title",
       targetSortTitle: "Title",
       actionCreator: sortByTitle
     }
   ]
   

2. 封装统一的点击处理函数
   把重复的onClick逻辑提取成独立方法，接收当前选项的配置作为入参，替代之前每个li里手写的重复代码：

   const onSortItemClick = (option) => {
     setSortTitle(option.targetSortTitle)
     setIsActive(false)
     dispatch(option.actionCreator(searchedMovies))
   }
   

3. 通过map批量渲染列表
   直接遍历上面定义的配置数组，一次性生成所有li元素，注意给每个元素加上唯一的key属性，避免React列表渲染警告：

   <ul>
     {sortOptions.map((option) => (
       <li
         key={option.targetSortTitle}
         onClick={() => onSortItemClick(option)}
       >
         <a href="#">{option.text}</a>
       </li>
     ))}
   </ul>
   

长期维护提示 #

后续如果需要新增排序选项，完全不需要修改渲染和事件逻辑，只需要在sortOptions数组里追加一条对应配置即可，长期维护成本会低很多。

内容的提问来源于stack exchange，提问作者walker1