如何在Reactjs中呈现代码生成的SVG

How to render a code-generated SVG in Reactjs?

本文关键字：代码生成 SVG Reactjs      更新时间：2023-09-26

我通过代码创建了一个SVG矩形，我试图在React中渲染。我尝试了不同的方法，包括dangerlysetinnerhtml，但没有成功。

在下面的例子中，'return t'工作，'return svgRectElement'不工作。

如何返回由svgRectElement生成的svg ?谢谢!

public render() {
    let svgRectElement: SVGRectElement = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
    svgRectElement.setAttributeNS(null, 'width', "300");
    svgRectElement.setAttributeNS(null, 'height', "300");
    svgRectElement.setAttributeNS(null, 'id', "myrect");        
    var t: JSX.Element = <rect width="300" height="100" id="myrect"></rect>;
    return t;
}

我不知道如何创建SVG元素，也不知道创建时需要哪些变量，但最直接的方法就是将其包装到组件中:

const MySvg = props => <svg xmlns="http://www.w3.org/2000/svg">...</svg>;

如果它有一些动态属性(例如样式，类名等)，你可以从给定的props中计算这些

相关文章：