如何使用循环让map函数按指定规则渲染卡片，间隔固定位置变更样式

你不需要额外自定义循环实现，map方法本身支持传入第二个参数获取当前遍历项的索引，直接通过索引判断对应排版规则即可。

判断逻辑说明：

• 数组索引从0开始计数，对应你要求的规则：第1张卡片对应索引0，第6张对应索引5，这两个位置走横向拉长样式；第2-5张对应索引1-4，走纵向拉长样式
• 如果后端返回数据不止6条，需要按这个规则循环排版的话，用索引对6取模判断即可：index % 6 === 0 || index % 6 === 5 时应用横向样式，其余情况应用纵向样式

修改后的参考代码：

<div className="container">
  <div className="row">
    {posts && posts.map((item, index) => {
      // 判断当前项是否为横向卡片
      const isHorizontal = index % 6 === 0 || index % 6 === 5;
      return (
        // 注意添加唯一key属性，优先用后端返回的唯一id
        <div key={item.id} className="col-md-6 col-sm-6">
          <div className="row">
            {isHorizontal ? (
              // 横向布局：先通栏大图，再两个小图
              <>
                <div className="col-md-12">
                  <img src={item.coverUrl} alt={item.title} />
                </div>
                <div className="row">
                  <div className="col-md-6 col-sm-6">
                    <img
                      style={{ minHeight: "280px", objectFit: "cover" }}
                      src={item.subImg1Url}
                      alt=""
                    />
                  </div>
                  <div className="col-md-6 col-sm-6">
                    <img
                      style={{ minHeight: "280px", objectFit: "cover" }}
                      src={item.subImg2Url}
                      alt=""
                    />
                  </div>
                </div>
              </>
            ) : (
              // 纵向布局：先两个小图，再通栏大图
              <>
                <div className="row">
                  <div className="col-md-6 col-sm-6">
                    <img
                      style={{ minHeight: "280px", objectFit: "cover" }}
                      src={item.subImg1Url}
                      alt=""
                    />
                  </div>
                  <div className="col-md-6 col-sm-6">
                    <img
                      style={{ minHeight: "280px", objectFit: "cover" }}
                      src={item.subImg2Url}
                      alt=""
                    />
                  </div>
                </div>
                <div className="col-md-12">
                  <img src={item.coverUrl} alt={item.title} />
                </div>
              </>
            )}
          </div>
        </div>
      )
    })}
  </div>
</div>

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