我正在尝试在 react-leaflet GeoJSON onEachFeature 弹出窗口中呈现自定义react组件，例如使用所有相应的feature.properties. 在弹出的 react-leaflet 组件中，它工作得很好
<Popup>
Some text
<Another React Component />
</Popup>
但是 GeoJSON 的 onEachFeature 函数看起来像这样
onEachFeature(feature, layer) {
const popupContent = `
<div>
<p>${feature.properties.name}</p>
</div>
`;
layer.bindPopup(popupContent);
}
popupContent是一个html代码，我不知道如何在其中包含 react 组件。需要帮忙！谢谢！
您可以使用ReactDOMServer.renderToString, 请参阅此处以拥有自定义 Popup 组件并layer.bindPopup通过将功能作为props或您想要的任何其他props传递来使用它来渲染它。
创建一个 Popup 组件，例如：
const Popup = ({ feature }) => {
let popupContent;
if (feature.properties && feature.properties.popupContent) {
popupContent = feature.properties.popupContent;
}
return (
<div>
<p>{`I started out as a GeoJSON ${
feature.geometry.type
}, but now I'm a Leaflet vector!`}</p>
{popupContent}
</div>
);
};
然后里面用它onEachFeature沿 ReactDOMServer.renderToString
const onEachFeature = (feature, layer) => {
const popupContent = ReactDOMServer.renderToString(
<Popup feature={feature} />
);
layer.bindPopup(popupContent);
};
编辑 在提供更多信息后，我将代码更改为如下所示：
创建一个模态只是为了这个例子，并作为props传递它的状态、切换功能和选定的功能。
迭代 geojson 并创建一个FeatureGroupreact-leaflet 组件，而不是使用GeoJSON和监听onEachFeature事件，通过作为子 react-leafletPopup组件传递。在那里，您可以拥有带有所需 onClick 事件的按钮。通过这种方式，可以克服静态 html 的问题。创建一个标记，然后单击按钮并启用模态。单击该按钮后，您将保存所选的特征参考。
如果您想扩展示例以涵盖所有可能的几何类型，您可以检查几何属性并基于该渲染圆或其他元素。
我也更新了演示。我希望这现在可以帮助你更多。