如何在Reactjs中渲染代碼生成的SVG？

Question

我通過代碼創建了一個SVG矩形，試圖在React中進行渲染。 我嘗試了其他各種嘗試，包括dragonallySetInnerHTML，但均未成功。

在下面的示例中，“ 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>;

如果它具有一些動態屬性（例如，樣式，類名等），則可以根據給定的props計算它們。