javascript - 如何正确处理 React.js 中的对象元素

Question

我正在尝试使用浏览器 native 工具在 React 组件中创建 svg 元素。创建元素并将该变量放入渲染方法中时出现的错误如下:

对象作为 React 子对象无效(找到:[object Element])

我可以使用以下命令将元素添加到页面，但我知道这不是最好的方法。处理此案的正确方法是什么？

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>
    );
  }
}