Reactjsでコード生成SVGをレンダリングするには？

私はReactでレンダリングしようとしているコードでSVG四角形を作成しました。私は、dangerouslySetInnerHTMLを含むさまざまなことを、成功せず試しました。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-wraping-dom-libs.md –

ありがとうAndy。私が下のScarysizeに言ったように、私は動的属性（x、yなど）を持つSnapSvgで自分のSVGを生成し、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、幅、高さなどは動的プロパティになります。ですから、私は自分のsvgコンポーネント（各ノード）をSnapを使って作成するつもりです。例えば、Snap.rect（x、y、...）などです。あなたはこれまで説明した方法でこれにアプローチしますか？ –

自分でSnapSvgを使ったことはありませんが、ドキュメントからは以下のことを行います：コンポーネントに空の ' Scarysize

お薦めいただきありがとうございます。私はそれを試み、私の結果と一緒に戻ってきます –

Reactjsでコード生成SVGをレンダリングするには？

答えて

関連する問題