react-leaflet: Using a Component as a popup on a GeoJSON feature

Question

My current use case is that I want to load in GeoJSON data, and render the points as markers on the map. This works fine.

My next step is to add a feature which displays a popup when the marker is clicked; this popup will include buttons which the user can press to call functions, which are passed to the component by the parent component. As such, the popup needs to be interactive.

Sadly, the only means of attaching a popup to a GeoJSON marker is to use the onEachFeature function, and binding the rendered HTML of the popup, like so:

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

marker.bindPopup(popupText);

Using renderToString means that the rendered popup is not interactive, and thus buttons and onClick listeners cannot be used and functions cannot be called.

The only other means I can think of is to render the popup completely independently of the map; intercept the popup event, get the associated marker, and render a component at the appropriate screen position, realigning it as the user drags the map around. This would be reinventing the wheel by completely abandoning Leaflet's existing popup code, and as such would be a massive pain.

However, I see no other means to bind a popup. Other solutions use the <Popup> component, but this requires using the <FeatureGroup> component which would mean abandoning the <GeoJSON> component.

Answer 1

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