Javascript 如何使用Array.map函数将交替颜色传递给组件？

我试图在react应用程序中向我的子组件发送一个交替颜色作为属性，但我不确定如何执行。每个基准线组件的颜色应交替。我想使用贴图，因为我的数组是动态的，在渲染中写出数组的每一行似乎是不必要的

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>
);

render（）{
const{stats}=this.state；
//var alternatingColor=#d5d5d5；
//var alternatingColor=#A9A9；
const Stats=Stats.map（（季节）=>{
回来
});
返回(
{Stats}
);

}

---

使用Array.map函数有没有一种简单的方法可以做到这一点？如果我理解正确，您可以这样做：

const colors = ['#d5d5d5', '#a9a9a9'] 

const Stats = stats.map((season, index) => {
    return <StatLine color={index % 2 ? colors[0] : colors[1]}  {...season}/>;
});

const colors=['#d5d5d5'，'#a9a9']
const Stats=Stats.map（（季节、索引）=>{
回来
});

---

在

Array.prototype.map

回调函数中，第二个参数是当前迭代项的索引，因此您可以使用它来计算模并相应地交替应用颜色。

如果我理解正确，您可以这样做：

const colors = ['#d5d5d5', '#a9a9a9'] 

const Stats = stats.map((season, index) => {
    return <StatLine color={index % 2 ? colors[0] : colors[1]}  {...season}/>;
});

const colors=['#d5d5d5'，'#a9a9']
const Stats=Stats.map（（季节、索引）=>{
回来
});

---

在

Array.prototype.map

回调函数中，第二个参数是当前迭代项的索引，因此您可以使用它来计算模并以交替方式应用相应的颜色。

创建一个交替颜色数组：

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

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

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

使用运算符从数组中获取颜色：

<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>
  );
};

render（）{
const alternatingColor=['#d5d5d5'，'#a9a9']；//可以将其移出渲染方法
const Stats=Stats.map（（季节、索引）=>{
回来
});
返回(
{Stats}
);
};

创建一个交替颜色数组：

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

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

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

使用运算符从数组中获取颜色：

<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>
  );
};

render（）{
const alternatingColor=['#d5d5d5'，'#a9a9']；//可以将其移出渲染方法
const Stats=Stats.map（（季节、索引）=>{
回来
});
返回(
{Stats}
);
};

var alternatingColor；
const Stats=Stats.map（（季节）=>{
alternatingColor=alternatingColor='#d5d5d5'？'#A9A9'：'#d5d5d5'；
回来
});

var alternatingColor；
const Stats=Stats.map（（季节）=>{
alternatingColor=alternatingColor='#d5d5d5'？'#A9A9'：'#d5d5d5'；
回来
});

render（）{
const{stats}=this.state；
//var alternatingColor=#d5d5d5；
//var alternatingColor=#A9A9；
const Stats=Stats.map（（季节、索引）=>{
返回索引%2==0？
: 
;
});
返回(
{Stats}
);
}

render（）{
const{stats}=this.state；
//var alternatingColor=#d5d5d5；
//var alternatingColor=#A9A9；
const Stats=Stats.map（（季节、索引）=>{
返回索引%2==0？
: 
;
});
返回(
{Stats}
);
}

数组。map

还提供当前元素的索引，可用于在十六进制值之间切换：

const Stats = stats.map((season, i) => <StatLine color={ i % 2 ? '#d5d5d5' : '#a9a9a9' } { ...season } />)

const Stats=Stats.map（（季节，i）=>）

数组。map

还提供当前元素的索引，可用于在十六进制值之间切换：

const Stats = stats.map((season, i) => <StatLine color={ i % 2 ? '#d5d5d5' : '#a9a9a9' } { ...season } />)

const Stats=Stats.map（（季节，i）=>）

alternatingColor始终是未定义的，因此颜色将始终是“#d5d5d5”@csander不，它仅在第一次迭代中未定义。请注意，

alternatingColor

是在

map

之外定义的，因此它将保留对值的任何更改。是的，但在您的回答中没有赋值。alternatingColor始终是未定义的，因此颜色将始终是“#d5d5d5”@csander不，它仅在第一次迭代中才是未定义的。请注意，

alternatingColor

是在

map

之外定义的，因此它将保留对值的任何更改。是的，但在您的answer@Kimmiekim-我很高兴它帮助了你：）@Kimmiekim-我很高兴它帮助了你：）