Javascript 为作为React组件导出的SVG使用随机颜色

我有三个SVG用作React组件。这三个SVG当前保存为JavaScript文件。它们的使用方式如下：

import React from 'react';
import PictureA from '../components/SVGs/PictureA.js'
import PictureB from '../components/SVGs/PictureB.js'
import PictureC from '../components/SVGs/PictureC.js'


const IndexPage = () => (
  <div className="mainArea">
    <PictureB />
    <PictureA />
    <PictureC />
  </div>
)

export default IndexPage

我一直在尝试将随机选择的颜色保存为变量，并将其直接填充到标记中。在做了一些研究之后，我觉得这是错误的方法。但是，如果有一种方法可以让它发挥作用，那将是最佳的。如果这不是正确的方法，我仍然非常感谢在PictureA.js文件中提供的任何帮助。如果可能的话，最好让SVG自给自足

---

非常感谢

您是否尝试将生成的颜色作为道具传递

然后称之为

<PictureA color={ chooseRandomColor() } />

[编辑]如果您希望它是自包含的，也可以将调用内联到随机颜色生成器：

  return (
      <svg
       xmlns="http://www.w3.org/2000/svg"
       svg width = "12rem"
       height = "auto"
       version = "1.1"
       viewBox = "-10 -110 100 250"
       preserveAspectRatio="xMinYMax slice">
        <g transform="translate(-2.202509394435669,-16.15250659108221)"
        fill = { chooseRandomColor() }
        fill-opacity = "0.90087" >
        <path ... />
    )
}

---

您可以通过在React JSX模板中用{}标记将JavaScript包围起来来内联JavaScript。请参见react文档中的示例。

谢谢！它并不像我希望的那样自给自足，但它很有效，是时候继续前进了！编辑以反映更独立的战略。祝你好运太好了！非常感谢你！

fill = { props.color }

<PictureA color={ chooseRandomColor() } />

  return (
      <svg
       xmlns="http://www.w3.org/2000/svg"
       svg width = "12rem"
       height = "auto"
       version = "1.1"
       viewBox = "-10 -110 100 250"
       preserveAspectRatio="xMinYMax slice">
        <g transform="translate(-2.202509394435669,-16.15250659108221)"
        fill = { chooseRandomColor() }
        fill-opacity = "0.90087" >
        <path ... />
    )
}