React setState理解与单组件应用：为列表项依次绑定背景色类

嘿，我来帮你搞定这个给每个contact列表项依次分配bgColors里背景色类的需求～其实核心就是利用map函数的索引参数来对应到bgColors数组的元素上，具体分两种场景来实现：

1. 当contacts和bgColors长度一致时 #

如果你的联系人数量和背景色类的数量刚好匹配，直接用map的第二个参数index来取对应的背景色类就行：

class App extends React.Component {
  state = {
    contacts: [/* 从API获取的数据 */],
    bgColors: ["bg-red", "bg-blue", "bg-green", "bg-yellow"]
  };

  render() {
    return (
      <div className="row">
        {this.state.contacts.map((contact, index) => (
          <div 
            key={contact.id} /* 记得加唯一key，这里假设contact有id字段 */
            className={`col-sm-3 relative book ${this.state.bgColors[index]}`}
          >
            {/* 这里渲染contact的内容，比如姓名、联系方式等 */}
            <h3>{contact.name}</h3>
            <p>{contact.email}</p>
          </div>
        ))}
      </div>
    );
  }
}

2. 当contacts数量多于bgColors时（循环复用背景色） #

如果联系人比背景色类多，想要循环重复使用bgColors里的类，就用取模运算index % this.state.bgColors.length，这样索引超过bgColors长度时会从头开始：

class App extends React.Component {
  state = {
    contacts: [/* 从API获取的数据 */],
    bgColors: ["bg-red", "bg-blue", "bg-green"]
  };

  render() {
    return (
      <div className="row">
        {this.state.contacts.map((contact, index) => {
          // 计算当前要使用的背景色类索引
          const bgIndex = index % this.state.bgColors.length;
          return (
            <div 
              key={contact.id}
              className={`col-sm-3 relative book ${this.state.bgColors[bgIndex]}`}
            >
              <h3>{contact.name}</h3>
              <p>{contact.email}</p>
            </div>
          );
        })}
      </div>
    );
  }
}

注意点 #

• 一定要给map出来的每个元素加唯一的key属性，React需要它来高效更新DOM，这里推荐用数据里的唯一标识（比如contact的id），不要直接用index当key（除非列表不会重新排序、增删）。
• 确保你的bgColors数组里的类名和CSS里定义的一致，不然背景色不会生效哦～

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