javascript - 在地图数组函数中动态附加样式

Question

我想动态地将颜色附加到我的反应组件

这些是我要附加的颜色

  this.color = ["#E91E63", "#2196F3", "#FDD835"]

我在 JSX 中映射一个数组（有点像这样）

   { this.state.graphData.map(data => {
        (<VictoryArea name="area-1" data={data} style={{ data: { fill: "#E91E63" } }}/>)
    })}

我的映射数组有 6 个元素。

我希望元素 1 和元素 4 具有相同的颜色，即 2 和 5、3 和 6。

问题：有人可以帮我弄清楚如何在填充中附加动态颜色吗？

标签： javascriptreactjs

Answer 1

您可以使用map函数的第二个参数，即元素的索引，以及%运算符来动态获取颜色。

{this.state.graphData.map((data, index) => 
  <VictoryArea
    name="area-1"
    data={data}
    style={{ data: { fill: this.color[index % this.color.length] } }}
  />
)}