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

Answer 2

在@Robert Longson的评论之后，我将Modal组件插入了foreignObject中，它可以工作。仍然需要手动调整“模态”窗口的范围，使其涉及到x，y坐标，以便将其完全弹出在单击的svg元素上方：

 <foreignObject x="58%" y="6%" width="200px" height="250px">
        <Modal show={show} handleClose={hideModal}>
          <p style={{ padding: "10px" }}>Modal</p>
          <p>Data</p>
        </Modal>
</foreignObject>

请注意，您必须设置x，y，height，width属性才能使其正常工作，如此答案React - html tags inside svg

中所述

在SVG元素内反应组件

2 个答案: