Question

我正在尝试在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组件。需要帮忙！谢谢！

Answer 1

您可以使用ReactDOMServer.renderToString，请参见here，以拥有自定义的Popup组件，并可以通过将特性作为道具或您想要的任何其他道具传递给layer.bindPopup来渲染它。

创建一个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);
  };

修改提供更多信息后，我将代码更改如下：

仅出于示例目的创建一个模态，并将其状态，切换功能和selectedfeature作为道具传递。
遍历geojson并创建一个FeatureGroup react-leaflet组件，而不是使用GeoJSON并通过将onEachFeature作为子类传递{{1} 1}}组件。在其中，您可以使按钮具有所需的onClick事件。通过这种方式，可以解决静态html的问题。创建一个标记，然后单击按钮并启用模态。单击按钮后，将保存选定的功能参考。
如果要扩展示例以涵盖所有可能的几何类型，则可以检查几何属性，并基于该渲染圆或其他元素。

我也更新了演示。希望现在可以对您有所帮助。

Demo

带有自定义React组件的React-leaflet geojson onEachFeature弹出窗口

1 个答案: