使用 react-leaflet-editable 和 react-leaflet 2.8.0

如何解决使用 react-leaflet-editable 和 react-leaflet 2.8.0

我正在将 react-leaflet-editable 集成/包含到我 100% 依赖于 react-leaflet v2.8.0 的现有项目中。我目前无法升级，因为它需要对整个项目进行太多更改。我们目前负担不起的东西。 （当一个人可以改变所有人时，为什么要改变一切。是的，我们可能有一天会这样做，但不是现在）

所以这是下面的代码。它与 react-leaflet v.3.x 完美配合，但当我切换到“2.8.0 版”时，它就开始工作了。

我尝试过的； Map 在 MapContainer 中被重命名为 3.x 所以我改变了它，但问题变成了 whenCreated={setMap} 参数。我需要一种方法将其链接到 ReactLeafletEditable。或者至少我认为这是问题所在。

我希望我已经解释得很好。代码和链接如下。

import React,{ useRef } from "react";
import L,{ Icon } from "leaflet";
import "leaflet-editable";
import ReactLeafletEditable from "react-leaflet-editable";
import {
  MapContainer,TileLayer,LayersControl,LayerGroup
} from "react-leaflet";
import "leaflet/dist/leaflet.css";

function Demo() {
  const editRef = useRef();
  const [map,setMap] = React.useState();

  const editPolygon = () => {
    editRef.current.startPolygon();
  };

  return (
    <ReactLeafletEditable ref={editRef} map={map}>
      <button onClick={editPolygon} className="editable-btn">
        Create Polygon
      </button>
      <MapContainer
        style={{
          height: "700px",backgroundColor: "",flexGrow: "1",cursor: `10`
        }}
        editable={true}
        zoom={4}
        maxZoom={18}
        center={[35,105]}
        whenCreated={setMap}
      >
        <LayerGroup>
          <TileLayer
            attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
            url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
          />
          <TileLayer url="http://tiles.openseamap.org/seamark/{z}/{x}/{y}.png" />
        </LayerGroup>
      </MapContainer>
    </ReactLeafletEditable>
  );
}

export default Demo;

链接到 3.0 中的项目：https://codesandbox.io/s/react-leaflet-editable-z7tnq?file=/src/App.js

链接到react-leaflet-editable：https://www.npmjs.com/package/react-leaflet-editable

PS：您可以将侧面的 react-leaflet 版本切换到 2.8.0 以查看行为。

感谢大家的支持

解决方法

将 ref 与 useEffect 结合使用以获取 react-leaflet v.2.x 中的地图实例。通过这种方式，您可以模仿 whenCreated 在版本 3.x

中的作用

const [map,setMap] = React.useState();
const mapRef = useRef();

useEffect(() => {
    if (!mapRef.current) return;

    setMap(mapRef.current.leafletElement);
  },[]);


<ReactLeafletEditable ref={editRef} map={map}>
  <button onClick={editPolygon} className="editable-btn">
    Create Polygon
  </button>
  <Map
   style={{
   height: "700px",backgroundColor: "",flexGrow: "1",cursor: `10`
   }}
   ref={mapRef}
 ...

Demo