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>

这是我的两个数组 have.Now 我的问题是如何以环绕方式访问颜色，即 data1 的 'five' 应该用颜色 [0] 着色。请帮助我我是 React 新手。

Answer 1

如果环绕，你的意思是选择颜色[0]，在第5个元素上因为只有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>');
});

React js 中的环绕

Wraparound in the React js

javascript

reactjs

semantic-ui-react