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。

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

Answer 1

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

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

在地图数组功能中动态附加样式

1 个答案: