javascript - 我如何将交替颜色传递给具有 Array.map 函数的组件？

Question

我试图在 React 应用程序中向我的子组件发送交替颜色作为属性，但我不太确定该怎么做。每个 StatLine 组件的颜色应该交替。我想使用 map，因为我的数组是动态的，并且在渲染中写出数组的每一行似乎是不必要的。

render() {

const { stats } = this.state;

//var alternatingColor = #d5d5d5;
//var alternatingColor = #a9a9a9;

const Stats = stats.map((season) => {
    return <StatLine color={alternatingColor}  {...season}/>;
});

return (
  <div>
   {Stats}
  </div>
);

有没有一种简单的方法可以用 Array.map 函数来做到这一点

Answer 1

创建一个交替颜色数组:

const alternatingColor = ['#d5d5d5', '#a9a9a9']; // because this is a static array, you can move it out of the component

使用 Array#map 第二个参数获取项目的索引:

stats.map((season, index) => {

使用 remainder operator % 从数组中获取颜色运算符(operator):

<StatLine color={alternatingColor[index % alternatingColor.length]} {...season}/>

渲染方法(未测试):

render() {

  const alternatingColor = ['#d5d5d5', '#a9a9a9']; // you can move it out of the render method

  const Stats = stats.map((season, index) => {
      return <StatLine color={alternatingColor[index % alternatingColor.length]}  {...season}/>;
  });

  return (
    <div>
     {Stats}
    </div>
  );
};