如何正確處理React.js中的對象元素

Question

我正嘗試使用瀏覽器本機工具在反應組件內創建svg元素。創建元素並把該變量在渲染方法時，得到錯誤是：

對象是不作爲陣營子（實測值：[對象元素]）有效

我可以得到元件以下內容的頁面，但我知道這不是最好的方法。處理這種情況的正確方法是什麼？

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和ellipse標記。

而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

React的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> 
    ) 
    } 
}