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 标记，还可能返回标题以及其他人。这打破了React规则，即每个组件只需要返回一个父元素。我们如何解决这个问题？

Answer 1

使用React 16或将defs和g换成svg标记，如下所示：

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

Answer 2

如果您使用的是React 16，则可能需要尝试

<React.Fragment>
  <div>
    <p>Thing 1</p>
  </div>
  <div>
    <p>Thing 2</p>
  </div>
</React.Fragment>

反应SVG，结合SVG的问题

2 个答案: