使用可与react传单2.8.0编辑的react传单

Question

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

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

我所尝试的；Map在3.x中被重命名为MapContainer，所以我更改了它，但问题变成了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即可查看行为。

感谢您对的支持

Answer 1

将ref与useEffect结合使用，以获得react传单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}
...

演示