Reactjs 使用颜色作为道具来反应SVG组件

我对SVG有一个独特的问题。 我用svg代码做了两个不同的组件，可以用道具改变颜色。现在，当我调用这两个组件时，它们具有相同的颜色，这取决于调用顺序。 起初我认为这是因为道具有相同的“名称”，但没有。我试图包装这些组件来分离它们，但也不起作用

在这里，我做了这个的简化版本：

还有一件事。如果您检查这些svg，它们有不同的颜色。我真的不知道发生了什么事

问候并感谢您。

我认为这是因为您定义了两个具有相同ID的

linearGradient

s，并在每个三角形中引用相同的ID

您可能希望提取出一个组件，该组件生成一个可引用的唯一ID（可能只是一个计数器），或者以某种方式为所有具有ID的对象生成一个唯一ID（例如过滤器）。

@y'ffre