将React SVG组件渲染为backgroundImage

Question

我试图渲染一个React组件，该组件返回<svg>作为backgroundImage的{​​{1}}。 目前，我正在将<div>与ReactDOMServer或renderToStaticMarkup结合使用，但没有显示任何内容：

renderToString

包裹jsx-to-string会这样做吗？

Answer 1

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

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

并且由于您还在url("...")中使用了双引号，因此标记无效。

因此，只需在url('...')中使用单引号，它应该可以工作。

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

Answer 2

您必须使用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中设置了相同的