React中如何在map遍历里为每隔一个元素添加指定类名？

要实现每隔一个元素添加偏移类名的需求，直接利用map方法提供的第二个参数index（元素索引）做判断即可，核心是通过索引的奇偶性来动态控制类名。

具体修改代码 #

把你标注的那行空className改成动态判断的形式，这里用Tailwind的mt-8作为偏移类（你可以根据实际需要换成合适的边距类）：

<div className="grid md:grid-cols-2 sm:grid-cols-2 grid-cols-1 gap-16 mt-24 px-4">
  {status === "success" &&
    delve(data, "restaurants") &&
    data.restaurants.map((restaurant, index) => (
    <div className={index % 2 === 1 ? "mt-8" : ""}> {/* 此处修改为动态类名 */}
      <RestaurantCard
        {...restaurant.attributes}
        locale={locale}
        key={index}
      />
    </div>
    ))}
</div>

逻辑说明 #

• index % 2 === 1：判断当前元素的索引是否为奇数（从0开始计数，对应第2、4、6...个元素），满足条件就添加偏移类名
• 如果需要让第1、3、5...个元素偏移，把判断条件改成index % 2 === 0即可
• 要是原本有基础类名，可以用模板字符串拼接：className={your-base-class ${index % 2 === 1 ? "mt-8" : ""}}

这样就能让隔行的卡片产生上下偏移，形成你要的棋盘式布局效果。

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