将交互式地图与 React 集成

Question

我想在空闲游戏中有一个交互式地图，您可以在其中单击图块 (See screenshot) 并且应该会发生某些事情。我正在尝试使用 SVG 和瓷砖周围的路径来做到这一点。请告诉我是否有更好的方法来实现这样的事情。

我的问题： 我终于让我的 Map-Component 包含整个 SVG 工作。我的两条路径（图像上的多边形）实现如下：

<g>
   <path id="Mine" fill="#000" fillOpacity="0.6" d="M987 204 L937 231 L937 282 L988 305 L1039 282 L1040 226" onClick={console.log('City clicked')} />
</g>

问题：onclick 事件在页面加载时触发，而不是在多边形被点击时触发。反应甚至支持吗？

提前致谢！

Answer 1

点击应该是一个函数： onClick={() => console.log('City clicked')}