Next.js中如何基于item.id实现列表项交替颜色渲染

数据老陈

2026-8-9

解决列表项交替背景色失效的问题

条件逻辑搞反
如果你的event.id是从1开始的，第一项的id为奇数，会触发else分支使用bg-gray50，和你想要的「第一项白、第二项灰」逻辑相反。只需交换条件中的类名即可：
```
<div className={`cursor-pointer w-full my-1 ${event.id % 2 === 0 ? 'bg-gray50' : 'bg-white'}`}>
```
或者直接判断奇数来匹配第一项：
```
<div className={`cursor-pointer w-full my-1 ${event.id % 2 === 1 ? 'bg-white' : 'bg-gray50'}`}>
```
id不连续导致判断混乱
如果event.id不是连续整数（比如存在跳号、非数字id），用id判断奇偶会失效。这种情况建议改用列表渲染时的index索引来判断，索引是连续递增的，能保证严格的交替效果：
```
{events.map((event, index) => (
  <div 
    className={`cursor-pointer w-full my-1 ${index % 2 === 0 ? 'bg-white' : 'bg-gray50'}`}
    key={event.id}
  >
    {/* 列表项内容 */}
  </div>
))}
```
CSS类名优先级或存在性问题
检查bg-white和bg-gray50这两个类是否存在于你的样式文件中，或者是否被其他更高优先级的样式（比如行内样式、更具体的CSS选择器）覆盖。可以通过浏览器开发者工具查看元素的Computed样式，确认背景色的实际生效值。