React中使用map遍历API数据时，如何为每个段落设置不同背景色？

方法1：用颜色数组配合索引循环取色 #

先定义一组背景色，遍历的时候根据当前项的索引取对应的颜色，用取模运算可以让颜色循环复用，避免索引超出数组长度：

// 定义颜色列表
const bgColors = ['#f8f9fa', '#e9ecef', '#dee2e6', '#ced4da'];

// 遍历生成段落
data.map((item, index) => (
  <p 
    key={item.id || index} // 优先用数据里的唯一ID，没有再用索引
    style={{ backgroundColor: bgColors[index % bgColors.length] }}
  >
    {item.p}
  </p>
))

方法2：直接使用API返回的颜色字段 #

如果你的API返回的数据对象里本身包含背景色字段（比如item.bgColor），可以直接把这个值赋值给样式：

data.map((item) => (
  <p 
    key={item.id}
    style={{ backgroundColor: item.bgColor }}
  >
    {item.p}
  </p>
))

方法3：通过CSS类名切换颜色 #

先在CSS里定义不同背景色的类，然后遍历的时候根据索引给段落添加对应的类：

/* 样式定义 */
.bg-1 { background-color: #ffeeee; }
.bg-2 { background-color: #eeffee; }
.bg-3 { background-color: #eeeeff; }

data.map((item, index) => (
  <p 
    key={item.id}
    className={`bg-${(index % 3) + 1}`}
  >
    {item.p}
  </p>
))

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