React 组件从 props 动态渲染 SVG答案

【问题标题】：React component to render SVGs dynamically from propsReact 组件从 props 动态渲染 SVG
【发布时间】：2021-09-16 14:37:15
【问题描述】：

我有一个组件，我们称它为 Frame，我希望它能够动态地将 svg 渲染到父组件的主体中。

我有一个 prop 是 props.svg，它是指向 svg 存储位置的链接。例如。 ./files/svg/Hello.svg

//parent component
<Frame src={props.svg} />

//child component
const Frame = (src) => {
  return (
    <>
      {src}
    </>
  )
}

但是它没有按照我的意图呈现 svg。我应该如何将 SVG 存储为本机文件或其他方式？以及如何从文件中获取它而不是打印文件位置./files/svg/Hello.svg？

编辑：我了解如何导入 SVG 文件，但我的问题是来自父组件的道具会动态变化，所以我不确定如何将其正确导入为 prop SVG 的 (src) 会改变。如果可以避免的话，我也不想为每个 SVG 构建一个组件。

【问题讨论】：

您阅读过您的框架文档吗？对于 CRA：create-react-app.dev/docs/adding-images-fonts-and-files
@DennisVash 是的，不要以为我解释得很好！请阅读我的编辑:)
如果props.svg 只是文件的相对路径，您需要Frame 包含将其用作src 的内容，对吗？就像在 Frame 中一样，您需要返回 <img src={src} /> 而不仅仅是返回 src 本身。尽管如果我没记错的话，如果您至少使用 CRA，那么无论如何仅将相对文件路径传递给它可能会出现问题。当 CRA (webpack) 构建项目时，文件路径将不再存在。所以你必须像import mysvg from './files/svg/Hello.svg' 一样，然后将mysvg 传递给Frame。
@John107 保留 SVG 中的数据意味着您只想将其保留为内联 <svg></svg> 元素？我之前使用过 react-svg (npmjs.com/package/react-svg)。它会为您处理将整个<svg><g><path> 结构注入到DOM 中，您只需要执行<ReactSVG src={src} />。您可以使用公用文件夹 (create-react-app.dev/docs/using-the-public-folder) 来解决我认为的导入问题。添加一个像public/svgs 这样的子文件夹然后你只需要做<ReactSVG src={process.env.PUBLIC_URL + '/svgs/Hello.svg'} />
@Aystub 谢谢，那个包很有帮助！设法解决了我的问题，再次感谢您！

【解决方案1】：

你必须将你的 SVG 文件转换成一个组件，就像这样（创建一个 file.js）：

const File= () => (
//put the content of SVG
    <svg
        xmlns="http://www.w3.org/2000/svg"
    >
    </svg>
)
export default File

然后使用：

<Frame src={ <File />} />

【讨论】：