React组件map遍历时按索引循环动态设置Bootstrap栅格类名

你的需求是7个元素为一个周期重复应用指定col类名，直接通过索引对7取余匹配周期内对应位置的类名即可，完全满足磁贴错落布局的要求，同时修正原代码里Reactkey属性大写的语法问题。

第一步先按你要的循环顺序定义类名数组：

// 数组顺序严格对应循环序列：col-sm-4、col-sm-8、col-sm-4、col-sm-4、col-sm-4、col-sm-8、col-sm-4
const tileColClasses = [
  'col-sm-4',
  'col-sm-8',
  'col-sm-4',
  'col-sm-4',
  'col-sm-4',
  'col-sm-8',
  'col-sm-4'
]

第二步修改map渲染逻辑，动态绑定类名：

{
  instagramItems.map((item, index) => {
    // 对索引取模，匹配当前位置在周期内对应的类名
    const currentColClass = tileColClasses[index % 7]
    return (
      <div className="row" key={index}>
        <div 
          onClick={() => handleClick(item, index)} 
          className={`image-block ${currentColClass}`}
          style={{
            backgroundImage: `url(${item.media_url})`,
            backgroundPosition: 'center',
            backgroundSize: 'cover',
            backgroundRepeat: 'no-repeat'
          }}
        ></div>
      </div>
    )
  })
}

• 该方案不受列表总长度限制，会严格按照你指定的序列无限循环应用类名
• 后续如果要调整布局错落规则，只需要修改tileColClasses数组的内容和顺序即可，不需要改动核心渲染逻辑
• 相比仅判断首尾位置的方案，该实现可以精准匹配每个位置的类名要求，不会出现布局错位

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