Question

我有三个我用作React组件的SVG。这三个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。有关示例，请参阅react文档中的here。

使用随机颜色将SVG导出为React组件

1 个答案: