javascript - React SVG，结合 SVG 的问题

Question

如果我想将多个 SVG 部分组合成一个组件，问题是每个 React 组件都必须返回一个父元素。

class ComponentA extends Component {
  render() {
    return (

      <svg>
        <Part1 />
        <Part2 />

      </svg>
    )
  }
}


class Part1 extends Component {
  render() {
    return (
      <defs>
        <linearGradient...>
        <etc...>
      </defs>
      <g>
        <path...>
        <text...>
      </g>
)
  }
}


class Part2 extends Component {
  render() {
    return (
      <defs>
        <linearGradient...>
        <etc...>
      </defs>
      <g>
        <circle...>
        <path...>
        <path...>
      </g>
)
  }
}

正如我们所见，为了将多个 SVG 组件组合成一个组件，我们必须同时返回 defs 和 g 标签，还可能返回 title 也许还有其他人。这打破了每个组件只需要返回一个父元素的 React 规则。我们如何解决这个问题？

Answer 1

使用React 16或者用 svg 标签包裹 defs 和 g，像这样:

class Part1 extends Component {
  render() {
    return (
     <svg>
      <defs>
        <linearGradient...>
        <etc...>
      </defs>
      <g>
        <path...>
        <text...>
      </g>
    </svg>
    )
  }
}