leaflet - 使用 geojson pointToLayer 函数时需要正确的方法在 Leaflet 弹出窗口中呈现 jsx 组件

Question

您好，有什么方法可以将 jsx 组件传递给 bindPopup 函数，以便我可以在按钮单击时推送 redux 命令？

 pointToLayer={(
      geoJsonPoint: Feature<Point, DeviceProperties>,
      latlng,
    ) => {
      const marker = L.marker(latlng);
      marker.setIcon(
        markerIcon({ variant: geoJsonPoint.properties.relation }),
      );

      const sddds = (
        <div className="font-quicksand">
          <h2>{geoJsonPoint.properties.id}</h2>
          <h2>{geoJsonPoint.properties.name}</h2>
          <p>{geoJsonPoint.properties.description}</p>
          <p>{geoJsonPoint.properties.ownerId}</p>
          <a
            onClick={() => {
              dispatch(setDevice(geoJsonPoint.properties));
            }}
          >
            Open device details
          </a>
        </div>
      );

      marker.bindPopup(renderToString(sddds));
      return marker;
    }}

我知道我可以使用 react 传单组件，但这样我不能将 Prop 传递给每个标记选项(我的意思是标记作为图层)。

Answer 1

所以这已经讨论了一点。有an issue在讨论这个的 react-leaflet repo 中，其结论是在 bindPopup 中简单地使用 vanilla JS创建弹出窗口的方法。我根本不喜欢这种解决方案，尤其是当您尝试在弹出窗口中使用非常面向 react 的事件处理程序(如 react-redux 操作)时。

问题React-leaflet geojson onEachFeature popup with custom react component当您使用 react 的 renderToString 时，有人问过您可能已经阅读过代码中的方法。但是您可能已经发现，这不会维护您的 JSX 可能包含的任何交互性或 JS。那里的回答者提出了使用模式而不是弹出窗口的想法，但这并不能完全回答您的问题或真正在基于点层 geojson 的弹出窗口中使用 JSX。

最终，您将无法从 pointToLayer 返回 JSX具有交互性的功能。我认为这将是 react-leaflet 目前没有实现的一个很好的功能。内封pointToLayer函数，没有直接写全功能 JSX 的好方法。

我玩了一会儿，试图利用 pointToLayer并保存 feature每次迭代的状态，然后渲染一个 Marker与 Popup从那开始，但它让我思考 - 为什么要打扰？放弃 GeoJSON组件并呈现您的Marker和 Popup s 直接来自 JSON 对象。像这样:

{myGeoJson.features.map((feature, index) => {
  return (
    <Marker
      key={index}
      position={L.latLng(feature.geometry.coordinates.reverse())}
    >
      <Popup>
        <button
          onClick={() => { yourReduxAction() }}
        >
          Click meeee
        </button>
      </Popup>
    </Marker>
  );
})}

Working sandbox

这样，你需要更加努力，手动将你的 GeoJSON 转换成 Marker与 Popups ，但并不像试图通过从 JSX (<GeoJSON />) 到 vanilla JS (pointToLayer) 回到 JSX (<Popup />) 来向后弯腰那么难。