javascript - React js 中的环绕

Question

const data1 = [
   { name: 'one' },
   { name: 'two' },
   { name: 'three' },
   { name: 'four' },
   { name: 'five'},
   { name: 'six'}
  ];


const colors = ['red', 'purple', 'violet', 'blue'];

我想要这种格式的输出---

  render(){...
      <Button color="from array colors">//Values from data1 here</Button>

这是我拥有的两个数组。现在我的问题是如何以环绕方式访问颜色，即 data1 的“五个”应该用颜色[0]着色。请帮助，因为我是 React 新手。

Answer 1

如果通过wraparound，您的意思是在第5个元素上选择颜色[0]，因为只有4种颜色，您可以使用modulo %

喜欢:

const data1 = [
	{ name: 'one' },
	{ name: 'two' },
	{ name: 'three' },
	{ name: 'four' },
	{ name: 'five'},
	{ name: 'six'}
];

const colors = ['red', 'purple', 'violet', 'blue'];

data1.forEach((v, i) => {
  let color = colors[i % colors.length];
  
  //Construct HTML and console for testing
  console.log('<Button color="' + color + '">' + v.name + '</Button>');
});