将 React SVG 组件渲染为 backgroundImage答案

【问题标题】：Render React SVG component as backgroundImage将 React SVG 组件渲染为 backgroundImage
【发布时间】：2019-09-04 13:32:02
【问题描述】：

我正在尝试渲染一个 React 组件，它返回一个 <svg> 作为 backgroundImage 的 <div>。目前我正在使用 ReactDOMServer 和 renderToStaticMarkup 或 renderToString 但没有显示：

const SvgComponent = () => {
    return (
        <svg xmlns='http://www.w3.org/2000/svg'><rect fill='red' x='0' y='0' /></svg>
    )
}

const ParentComponent = () => {
    return (
        <div
            className={classes.banner}
            style={{
                backgroundImage: `url("data:image/svg+xml;utf8, ${ReactDOMServer.renderToStaticMarkup(<SvgComponent />)} ")`
            }}
        >
        </div>
    )
}

请问包jsx-to-string的方法是什么？

【问题讨论】：

标签： reactjs svg jsx

【解决方案1】：

您必须使用encodeURIComponent() 对 SVG 数据进行 URI 编码，因为如果未进行 URI 编码，React 将不会呈现 SVG 数据。所以，

const svgString = encodeURIComponent(renderToStaticMarkup(<SvgComponent />));

另外，在<rect> 中设置 SVG 之类的宽度和高度，

<rect fill="red" width={100} height={100} />

所以最终的代码应该是这样的，

import ReactDOM from "react-dom";
import { renderToStaticMarkup } from "react-dom/server";
import React from "react";

const SvgComponent = () => {
  return (
    <svg xmlns="http://www.w3.org/2000/svg">
      <rect fill="red" width={100} height={100} />
    </svg>
  );
};



const ParentComponent = () => {
const svgString = encodeURIComponent(renderToStaticMarkup(<SvgComponent />));
  return (
      <div
          style={{
              backgroundImage: `url('data:image/svg+xml;utf8, ${svgString}')`,
             width:500,
             height:500
            }}
      >
      </div>
  )
}

ReactDOM.render(<ParentComponent />, document.getElementById("root"));

我已经在 CodeSandbox 中设置了相同的设置，

【讨论】：

【解决方案2】：

ReactDOMServer.renderToStaticMarkup 在标记中使用双引号，所以它返回

<svg xmlns="http://www.w3.org/2000/svg"><rect fill="red" width="10" height="10"></rect></svg>

因为你还在url("...") 中使用了双引号，所以它给出了无效的标记。

所以只需在url('...') 中使用单引号就可以了。

注意：如果 react 改变了 renderToStaticMarkup 的实现方式，这可能会中断！

【讨论】：