React.jsのオブジェクト要素を正しく処理する方法

Question

反応コンポーネント内でsvg要素を作成するためにブラウザのネイティブツールを使用しようとしています。要素を作成し、renderメソッドでその変数を配置するには、次のされたときに私が取得エラー：

オブジェクトが反応子として有効ではありません（が見つかりました：[要素をオブジェクト]）

私は要素を取得することができます次のページが、私はそれが最良の方法ではないことを知っています。このケースを扱うための適切な方法は何でしょうか？

import React from 'react' 


export default class Circle extends React.Component { 

    componentDidMount() { 
    let canvas = document.createElementNS('http://www.w3.org/2000/svg', 'svg') 
    canvas.appendChild(document.createElementNS('http://www.w3.org/2000/svg', 'ellipse')) 
    document.getElementById('element').appendChild(canvas) 
    } 

    render() { 
    return (
     <div id='element'></div> 
    ); 
    } 
} 

Answer 1

コードでは、単純にsvgと楕円形のタグを使用できます。

およびhereはすべてサポートされているsvg属性です。

import React from 'react' 

export default class Circle extends React.Component { 

    render() { 
    return (
     <div id='element'> 
      <svg></svg> 
      <ellipse></ellipse> 
     </div> 
    ); 
    } 
} 

Answer 2

リアクションのSVGサポートは、（ほぼ）機能パリティです。あなたが持っているエラーは、Reactコンポーネントではないjavascriptオブジェクトを使用している可能性が高いです。たとえば、このようなものは完全に有効です：

class CaretIcon extends React.Component { 
    render() { 
     return (
     <svg 
      xmlns="http://www.w3.org/2000/svg" 
      xmlnsXlink="http://www.w3.org/1999/xlink" 
      height={100} 
      style={{ enableBackground: 'new 0 0 512 512'}} 
      version="1.1" 
      viewBox="0 0 512 512" 
      width={100} 
      xmlSpace="preserve"> 
      <path d="M413.1,327.3l-1.8-2.1l-136-156.5c-4.6-5.3-11.5-8.6-19.2-8.6c-7.7,0-14.6,3.4-19.2,8.6L101,324.9l-2.3,2.6 C97,330,96,333,96,336.2c0,8.7,7.4,15.8,16.6,15.8v0h286.8v0c9.2,0,16.6-7.1,16.6-15.8C416,332.9,414.9,329.8,413.1,327.3z"/> 
     </svg> 
    ) 
    } 
}