React JS中的SVGSVGElement渲染，没有危险地设置InnerHtml

Question

问题：我可以在不使用SVGSVGElement的情况下在React中渲染dangerouslySetInnerHtml吗？

上下文：

我正在使用vis.js图形库，getLegend方法返回一个SVGSVGElement对象，即SVGSVGElement在控制台中，我可以看到以下内容：

const icon = chart.getLegend(args);

问题：

[当我尝试使用以下方法在响应中渲染它时：

in: icon instanceof SVGSVGElement
out: true
in: icon
out: <svg><rect x="0" y="0" width="30" height="30" class="vis-outline"></rect><path class="vis-graph-group0" d="M0,15 L30,15"></path></svg>

我收到以下错误：

render (
<div> { icon } </div>
)

解决方法：

目前，我正在使用：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 or wrap the object using createFragment(object) from the React add-ons. Check the render method of `LegendElement`

但是我希望有一个简单的解决方案，不要使用名称中带有单词危险一词的方法。

研究：

我阅读了类似的问题，但我认为它对运行时生成的SVG没有帮助：<svg dangerouslySetInnerHTML={{__html: icon.innerHTML}} />

Answer 1

您可以像这样简单地使用useRef附加SVGSVGElement。此示例适用于具有挂钩的功能组件，但可以适用于类组件。

How do I use an SVG in React without using dangerouslySetInnerHTML?