javascript - 对导出为 React 组件的 SVG 使用随机颜色

Question

我有三个 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 中，我希望发生这样的事情:

import React from 'react';

export default function PictureA(props) {
  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 = "FILL THIS WITH A RANDOM COLOR"
    fill-opacity = "0.90087" >
    <path
       d="very long path" />
      </g>
    </svg>
);
}

我有一个预先选择的颜色数组，从该数组中进行选择没有问题。我遇到的问题是在选择颜色后将其插入:

fill = "FILL THIS WITH A RANDOM COLOR"

我一直在尝试将随机选择的颜色保存为变量并将其直接填充到标签内。经过一些研究后，我觉得这是错误的方法。但如果有一种方法可以实现这一点，那将是最佳的。如果这不是正确的方法，我仍然非常感谢任何帮助使随机化在 PictureA.js 文件中工作。如果可能的话，最好让 SVG 是独立的。

非常感谢!

Answer 1

您是否尝试过将生成的颜色作为 prop 传递？

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 ... />
    )
}

您可以通过在 React JSX 模板中用 { } 标签包围 JavaScript 来内联 JavaScript。请参阅here在 React 文档中有一个示例。