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

Question

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

这里我做了简化版： https://codesandbox.io/s/svg-triangle-with-colos-as-prop-njmy7?fontsize=14&hidenavigation=1&theme=dark

还有一件事。如果您检查这些svg，它们将具有不同的颜色。我真的不知道怎么回事。

问候，谢谢。

Answer 1

https://codesandbox.io/s/svg-triangle-with-colos-as-prop-0k8yw

我认为是因为您要定义两个具有相同ID的linearGradient，并在每个三角形中引用相同的ID。

您可能想要提取一个组件，该组件会生成一个唯一的ID（可以只是一个计数器）供您参考，或者以某种方式为具有ID的所有内容（例如过滤器）生成一个唯一的ID。