分类导航

程序问答发布时间：2022-06-02 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了无法在 React 中显示来自 SVGSVGElement 的 SVG，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决无法在 React 中显示来自 SVGSVGElement 的 SVG？

开发过程中遇到无法在 React 中显示来自 SVGSVGElement 的 SVG的问题如何解决？下面主要结合日常开发的经验，给出你关于无法在 React 中显示来自 SVGSVGElement 的 SVG的解决方法建议，希望对你解决无法在 React 中显示来自 SVGSVGElement 的 SVG有所启发或帮助；

我有一个 SVG 对象序列化为 React 状态中的字符串。我想在屏幕上显示它，但一直没有这样做。如果我以内联方式手动粘贴 SVG 的 XML 数据，它会起作用。但我需要从国家拿走它。另外，我想避免使用 dangerouslySeTinNERHTML 方法。

我尝试从字符串中解析它，然后像这样将其设置为INNERHTML对象：

let SVG_file = this.state.SVG;
var parser = new DOMParser();
var svg = parser.parseFromString(SVG_file,"image/svg+xml");

return (
        document.getElementsByname('Container').INNERHTML = svg.documentElement
    )

我在执行上面的代码时收到以下错误：

Error: Objects are not valID as a React child (found: [object SVGSVGElement]). If you meant to render a collection of children,use an array instead.

如果相反，在上面的返回中，我通过以下两行中的任何一行更改它（更改为 outerHTML 和 INNERHTML）：

document.getElementsByname('Container').INNERHTML = svg.documentElement.outerHTML
document.getElementsByname('Container').INNERHTML = svg.documentElement.INNERHTML

React 以纯文本形式呈现 XML 的内容，而不是作为组件呈现。

有关如何显示 SVG 本身的任何建议？提前致谢！

P.s.：如果有帮助，用作内联声明的 SVG 是这个：

var XML = <svg xmlns="http://www.w3.org/2000/svg" wIDth="145" height="145">
        <path transform="scale(5)" classname="qrline" stroke="#00008b"
              d="M4 4.5h7m1 0h1m2 0h2m1 0h7m-21 1h1m5 0h1m5 0h1m1 0h1m5 0h1m-21 1h1m1 0h3m1 0h1m3 0h1m3 0h1m1 0h3m1 0h1m-21 1h1m1 0h3m1 0h1m1 0h3m1 0h1m1 0h1m1 0h3m1 0h1m-21 1h1m1 0h3m1 0h1m2 0h1m1 0h1m2 0h1m1 0h3m1 0h1m-21 1h1m5 0h1m3 0h3m1 0h1m5 0h1m-21 1h7m1 0h1m1 0h1m1 0h1m1 0h7m-12 1h4m-11 1h1m1 0h3m1 0h2m3 0h1m3 0h1m2 0h1m-13 1h1m1 0h2m1 0h3m1 0h4m-21 1h1m3 0h1m1 0h1m1 0h2m4 0h1m1 0h1m2 0h2m-21 1h3m1 0h2m1 0h1m1 0h1m1 0h1m2 0h1m1 0h1m-17 1h1m2 0h1m1 0h4m2 0h2m1 0h2m3 0h2m-13 1h2m1 0h2m1 0h3m2 0h1m-20 1h7m2 0h2m4 0h6m-21 1h1m5 0h1m1 0h1m1 0h1m1 0h1m1 0h2m4 0h1m-21 1h1m1 0h3m1 0h1m1 0h3m4 0h1m3 0h2m-21 1h1m1 0h3m1 0h1m2 0h1m2 0h1m1 0h3m1 0h2m-20 1h1m1 0h3m1 0h1m1 0h1m2 0h2m2 0h4m1 0h1m-21 1h1m5 0h1m2 0h1m5 0h1m3 0h1m-20 1h7m2 0h6m1 0h2m1 0h2"/>
    </svg>

return (
    document.getElementsByname('Container').INNERHTML = XML
)