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

Question

我通过代码创建了一个SVG矩形，我正在尝试在React中渲染。我尝试了不同的东西，包括dangerouslySetInnerHTML，没有成功。

在下面的例子中，'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;
}

Answer 1

我不知道如何创建SVG元素以及创建所需的变量，但直接的方法是将其包装到组件中：

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

如果它有一些动态属性（例如样式，类名等），你可以从给定的道具中计算出来。