如何在React map遍历渲染时按固定循环模式设置col-start值

直接利用数组遍历的索引参数配合取模运算，循环匹配预设的列起始类名即可，不需要额外复杂逻辑。

核心代码（适配Tailwind CSS，生产构建可用） #

// 按需要的循环顺序存完整类名，避免Tailwind构建时漏扫动态类
const colStartClassList = ["col-start-1", "col-start-3", "col-start-2"]

function ProjectList() {
  return (
    <div className="relative grid grid-cols-3">
      {projects.map((project, index) => (
        <div
          className={colStartClassList[index % colStartClassList.length]}
          key={project.data.title}
        >
          <ProjectThumbnail />
        </div>
      ))}
    </div>
  )
}

逻辑说明 #

• 数组map方法的第二个参数为当前遍历项的索引，从0开始随遍历递增
• 用索引对类名数组的长度做取模运算，得到的结果会按0→1→2→0→1→2的规律循环，刚好匹配需要的col-start-1 → col-start-3 → col-start-2循环顺序
• 如果后续需要调整列起始的排列顺序，直接修改colStartClassList数组内的类名顺序即可，不需要改动遍历逻辑

注意：如果使用Tailwind CSS，不要用col-start-${x}的方式动态拼接类名，Tailwind在生产构建时是通过扫描源码里的完整类名生成样式的，动态拼接的类名不会被识别，会导致样式失效。

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