在 React 中从 NodeJS 渲染一个 SVG 元素答案

【问题标题】：Rendering an SVG element from NodeJS in React在 React 中从 NodeJS 渲染一个 SVG 元素
【发布时间】：2020-09-24 08:17:18
【问题描述】：

我正在尝试根据发送到 API 的请求呈现 svg 图像。然后，API 会使用我尝试在我的应用程序中呈现的 .svg 文件进行响应。将文件添加为 react 中的元素似乎不起作用。我正在使用 create-react-app 和静态导入的 svg 文件工作正常。这是我的代码的样子：

const preview = fetch('route to the file')
  .then((res) => res)

return pug`
    div.creator__preview {preview}
`

我认为重要的是要注意，由于某种原因不使用 pug 会给我一个错误，但我猜这只是我注意到的一些错误。我也试过用邮递员获取相同的 URL，它工作得很好。

编辑：它尝试使用 dangerouslySetInnerHTML ，但它给出了一个错误消息： props.dangerouslySetInnerHTML 的格式必须为 {__html: ...}

这是我目前的代码：

const preview = fetch(
        'route to the file',
    ).then((res) => {
        return {
            __html : res,
        }
    })

return pug`
    div.creator__preview(dangerouslySetInnerHTML={preview})
`

【问题讨论】：

标签： node.js reactjs svg

【解决方案1】：

您可以使用https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml 将您的代码粘贴到反应中：

function MyComponent() {
  return <div dangerouslySetInnerHTML={createMarkup()} />;
}

不过要小心。如果您不 100% 信任该服务器，最好不要使用该功能或进行一些安全检查

【讨论】：

我试过了，我认为它解决了主要问题，但我收到一个错误，说它应该是一个具有名为 __html 的字段的对象。我将其命名为，但它仍然无法正常工作。有什么我应该注意的具体退货方式吗？我更新了上面的代码。