react-leaflet：使用组件作为 GeoJSON 功能的弹出窗口

Question

我当前的用例是我想加载 GeoJSON 数据，并将这些点渲染为地图上的标记。这很好用。

我的下一步是添加一个在点击标记时显示弹出窗口的功能；这个弹出窗口将包含按钮，用户可以按下这些按钮来调用由父组件传递给组件的函数。因此，弹出窗口需要具有交互性。

遗憾的是，将弹出窗口附加到 GeoJSON 标记的唯一方法是使用 onEachFeature 函数，并绑定呈现的 HTML 弹出窗口，如下所示：

const popupNode = <MapPopup marker={marker} closePopup={closePopup} />;
const popupText = ReactDOMServer.renderToString(popupNode);

marker.bindPopup(popupText);

使用renderToString意味着呈现的弹出窗口不是交互式的，因此不能使用按钮和onClick监听器，也不能调用函数。

我能想到的唯一其他方法是完全独立于地图渲染弹出窗口；拦截弹出事件，获取关联的标记，并在适当的屏幕位置呈现一个组件，并在用户拖动地图时重新对齐它。这将通过完全放弃 Leaflet 现有的弹出代码来重新发明轮子，因此将是一个巨大的痛苦。

但是，我看不到其他绑定弹出窗口的方法。其他解决方案使用 <Popup> 组件，但这需要使用 <FeatureGroup> 组件，这意味着放弃 <GeoJSON> 组件。

Answer 1

我最终放弃了 GeoJSON 组件并使用了 Popup 组件。