Question

我正在尝试使用浏览器本机工具在react组件中创建svg元素。创建元素并将该变量放在render方法中时得到的错误如下：

对象无效作为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>
    );
  }
}

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

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

2 个答案: