将交互式 map 与 React 集成

Question

我想在一个空闲游戏中拥有一个交互式 map，您可以在其中单击一个图块（参见屏幕截图），应该会发生一些事情。 我正在尝试使用 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

点击应该是 function: onClick={() => console.log('City clicked')}