问题:
我可以在不使用SVGSVGElement
的情况下在React中渲染dangerouslySetInnerHtml
吗?
上下文:
我正在使用vis.js图形库,getLegend
方法返回一个 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 dangerouslySetInnerHTML={{__html: icon.innerHTML}} />
但是我希望有一个简单的解决方案,不要使用名称中带有“危险”一词的方法。
研究:
我读过类似的问题,但我认为它对运行时生成的SVG没有帮助:How do I use an SVG in React without using dangerouslySetInnerHTML?
最佳答案
您可以像这样简单地使用useRef附加SVGSVGElement。此示例适用于具有 Hook 的功能组件,但可以适用于类组件。
const svg = useRef(null);
useEffect(()=>{
if(svg.current){
svg.current.appendChild(icon)
}
}, []);
return (
<div ref={svg}/>
);
关于javascript - 在React JS中渲染SVGSVGElement而不危险地设置,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/45877087/