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

我用代碼創建了一個SVG矩形，我試圖在React中渲染。我嘗試了不同的東西，包括危險的SetInnerHTML，但沒有成功。如何在Reactjs中渲染代碼生成的SVG？

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

來源

2016-10-02 Greg Forel

不要在渲染函數中創建DOM節點。這不是如何反應的作品。如果您需要繞過React，請在componentDidMount函數中創建它，並將其附加到您的渲染函數返回的內容。進一步閱讀https://github.com/ryanflorence/react-training/blob/gh-pages/lessons/05-wrapping-dom-libs.md –

謝謝安迪。正如我在下面告訴Scarysize，我想要做的是使用SnapSvg生成我的svg，使用動態屬性（x，y等），然後使用React進行渲染。我想你和他都提出了相同的技術解決方案。 –

我不知道你是如何創建SVG元素和怎麼樣的變量是必要的創造，而是直接的方式將只是把它包裝成一個組件：

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

如果它具有一些動態屬性（例如樣式，類名等），則可以計算來自給定道具的那些屬性。

來源

2016-10-02 09:37:50 Scarysize

謝謝你的答案（@AndyRay）。最終，我有一個我想用SnapSvg庫顯示的節點圖，並且是的，x，y，寬度，高度等等都是動態屬性。因此，我打算使用Snap創建我的svg組件（每個節點），而不是寫入svg本身，例如：Snap.rect（x，y，...）。你仍然會用你描述的方式來處理嗎？ –

我自己並沒有使用SnapSvg，但是從文檔中我會執行以下操作：讓組件呈現空的' Scarysize

感謝您的建議。我會嘗試，並回來我的結果 –

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

回答

相關問題