SVG元素内的反应成分

Question

我想在SVG中嵌入自定义的react组件，但是它不起作用。 SVG甚至允许它吗？如果没有，是否有解决方法？下面是我的代码，尝试插入Modal组件：

<polygon
        id="Paris"
        <Modal show={show} handleClose={hideModal}>
          <p>Modal</p>
          <p>Data</p>
        </Modal>
        <button type="button" onClick={showModal}>
          open
        </button>
        stroke="#010101"
        fill="rgb(251, 106, 106)"
        stroke-width="2"
        stroke-miterlimit="10"
        points="1596.182,374.685 .../>

[我要完成的工作是，在svg地图内单击一个省时，显示一个弹出窗口。

Answer 1

对于您要实现的目标，我将svg封装在模态中。像这样：

<Modal>
   <svg></svg>
</Modal>

在模态组件中，确保将svg显示为子代：

return (
    <Fragment>
      {props.children}
    </Fragment>
  );

在文档中查看更多信息：https://reactjs.org/docs/composition-vs-inheritance.html