React新手求助：如何循环复用颜色数组为按钮绑定颜色

嘿，作为React新手碰到这个问题很正常，其实用一个简单的取余运算就能搞定循环复用colors数组的需求啦！

核心思路 #

要实现循环复用数组元素，关键在于利用取余运算符（%）。对于data1里的每一个元素，我们用它的索引i对colors数组的长度取余，得到的结果就是colors数组中对应的下标——这样当索引超过colors的长度时，会自动从头开始取值，完美实现循环复用。

比如你提到的data1里的第5个元素（name: 'five'），它的索引是4（数组索引从0开始），4 % 4 = 0，正好对应colors[0]也就是red，完全符合你的要求。

完整代码示例 #

函数组件写法（React 16.8+推荐）

import React from 'react';

const MyComponent = () => {
  const data1 = [ { name: 'one' }, { name: 'two' }, { name: 'three' }, { name: 'four' }, { name: 'five'}, { name: 'six'} ];
  const colors = ['red', 'purple', 'violet', 'blue'];

  return (
    <div>
      {data1.map((item, index) => {
        // 计算循环复用的颜色，加默认值避免空数组报错
        const currentColor = colors.length ? colors[index % colors.length] : 'gray';
        return (
          <Button key={index} color={currentColor}>
            {item.name}
          </Button>
        );
      })}
    </div>
  );
};

export default MyComponent;

类组件写法（对应你提到的render()方法）

import React, { Component } from 'react';

class MyComponent extends Component {
  render() {
    const data1 = [ { name: 'one' }, { name: 'two' }, { name: 'three' }, { name: 'four' }, { name: 'five'}, { name: 'six'} ];
    const colors = ['red', 'purple', 'violet', 'blue'];

    return (
      <div>
        {data1.map((item, index) => {
          const currentColor = colors.length ? colors[index % colors.length] : 'gray';
          return (
            <Button key={index} color={currentColor}>
              {item.name}
            </Button>
          );
        })}
      </div>
    );
  }
}

export default MyComponent;

关键细节说明 #

• key={index}：React循环渲染列表时必须加唯一key，这里用索引是简单的做法，如果data1里的item有唯一id，用id会更稳妥。
• 容错处理：判断colors.length是为了防止colors为空数组时出现除以0的错误，此时会用默认颜色gray，你可以改成自己需要的默认值。

这样写出来的组件就能自动循环复用colors里的颜色啦，每个Button的颜色会按照red → purple → violet → blue → red → purple的顺序对应data1里的六个元素，完全符合你的需求～

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