我可以使用svg标记元素（g）作为React JSX返回值的根元素吗？

Question

我想这样做：

组件Client / Child

return (
            <Limage>
              <g id="golf">
                <path fill="none" stroke="#fff" stroke-width="4" stroke-linejoin="round" stroke-miterlimit="10" d="M26.007885,46.7037048 c0,0-10.666666-20.6913586,2.6666679-28.8888893c0,0-11.6543217-0.2962971-14.5185194-10.8148155 c0,0-2.3703699,4.4938269,2.5185194,10.0740738C16.6745529,17.0740738,10.6992435,31.1481476,26.007885,46.7037048z"/>
                <path fill="none" stroke="#fff" stroke-width="4" stroke-linejoin="round" stroke-miterlimit="10" d="M15.7856636,33.9629631 l-1.4814816-5.6296291c0,0-6.0740747,7.3580227-4.1481485,18.666666C10.1560335,47,10.4029474,39.0493813,15.7856636,33.9629631z" />
                <path fill="none" stroke="#fff" stroke-width="4" stroke-linejoin="round" stroke-miterlimit="10" d="M14.1560335,7L36,1l3,4 l-0.0000038,0.000001c-1.1943779,0.5971899-2.6368942,0.3631015-3.5811348-0.5811381L33,2"/>
                <circle fill="none" stroke="#fff" stroke-width="4" stroke-linejoin="round" stroke-miterlimit="10" cx="26" cy="10" r="4"/>
                <line fill="none" stroke="#fff" stroke-width="4" stroke-linejoin="round" stroke-miterlimit="10" x1="17" y1="45" x2="17" y2="48"/>
                <circle fill="none" stroke="#fff" stroke-width="4" stroke-linejoin="round" stroke-miterlimit="10" cx="17" cy="43" r="4"/>
              </g>
            </Limage>
)

组件Parent

componentDidMount () {

  this.runOnClientSide((v) => {
    this.state.vivus = new v(this.props.name)
  })

}

render () {
  return (
    <svg id={this.props.name}>
      {this.props.children}
    </svg>
  )
}

然而，似乎相当一致的事情是：

<svg id="whatever"></svg>

换句话说， SVG中没有显示任何内容！

这是React的限制并尝试将g元素用作JSX包装元素吗？如果是这样，有一个简单的解决方法吗？

Answer 1

我打算删除这个，但我认为如果您正好使用Vivus，那么值得一提。

我在我的state componentDidMount上设置了一些内容，这导致了另一个id，因为我使用的是动态的id，这导致{ {1}}，但没有再调用render，这意味着没有动画和关于不同Vivus的警告。

关键点：如果您要使用id，请遵循以下准则：

1. 制作包装纸。我在这里分享。
2. 在包装器中，使用Vivus来调用componentDidMount
3. **使用Vivus而不是Vivus获取require。 **我不能强调这一点，因为这只是客户端的 事件！
4. 确保您在渲染后不立即设置状态！无论如何，这通常是一个不好的迹象。

我的包装

你的里程 会有所不同，因为这种情况很糟糕......你应该只将它作为入门者或指南使用，并根据需要进行扩展。

import

我的例子

export class Limage extends React.Component {

  static propTypes = {
    name: React.PropTypes.string.isRequired,
    duration: React.PropTypes.number
  }

  static defaultProps = {
    name: new Date().getTime().toString(),
    duration: 2000
  }

  constructor (props) {
    super(props)
  }

  runOnClientSide (what) {
    if (window !== undefined) {
      if (null == this.Vivus) {
        this.Vivus = require('vivus')
      }

      what(this.Vivus)
    }
  }

  componentDidMount () {

    this.runOnClientSide((v) => {

      window.x = ReactDOM.findDOMNode(this.refs.svgMarkup)

      this.vivus = new v(this.props.name, {
        duration: 20000
      })
    })

  }

  render () {
    return (
      <svg id={this.props.name} ref='svgMarkup'>{this.props.children}</svg>
    )
  }

}

export default Limage