反应传单和反应-传单-画

Question

我试图在传单地图上实现绘图功能。我已经创建了一个新的应用程序，它只安装了“反应传单”，使用了npx创建-react app，并安装了以下软件包：

• npm安装react dom传单
• npm安装反应-传单

此时，我已经启动了应用程序，一切都很好:在中间有一个标记正确地显示了地图。

然后，我添加了get传单绘制包，使用npm安装了get传单绘图，并将其导入到页面中，我得到以下错误：

./node_modules/react-leaflet-draw/dist/esm/EditControl.js
Attempted import error: 'MapControl' is not exported from 'react-leaflet'

这是完整的代码：

import './App.css';
import 'leaflet/dist/leaflet.css';
import { MapContainer, TileLayer, Marker, Popup, MapControl } from 'react-leaflet'
import L from 'leaflet';
import icon from 'leaflet/dist/images/marker-icon.png';
import iconShadow from 'leaflet/dist/images/marker-shadow.png';
import iconRetina from 'leaflet/dist/images/marker-icon-2x.png';

import 'leaflet-draw/dist/leaflet.draw.css';
import { EditControl } from "react-leaflet-draw";


delete L.Icon.Default.prototype._getIconUrl;
L.Icon.Default.mergeOptions({
  iconRetinaUrl: iconRetina,
  iconUrl: icon,
  shadowUrl: iconShadow
})



function App() {
  return (
    <MapContainer center={[51.505, -0.09]} zoom={10} scrollWheelZoom={true}>
      <TileLayer
        attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      />
      <Marker position={[51.505, -0.09]}>
        <Popup>
          A pretty CSS3 popup. <br /> Easily customizable.
    </Popup>
      </Marker>
    </MapContainer>
  );
}

export default App;

这个包裹有什么问题？它对反应有效吗？

Answer 1

如果您检查这个github问题，您将得出结论，react-leaflet-draw只兼容react-leaflet版本2.x，而不兼容3.x版本。

因此，它在您的情况下不起作用，因为您使用的是react传单版本3.x。

如果降级到2.x版本，它应该会像预期的那样工作

最后但并非最不重要的一点是，您不需要导入MapControl，因为它不是从包中导入的。您只需要导入

import { EditControl } from "react-leaflet-draw"

就像你已经做的那样。MapControl在库中内部使用，更新版本中可能发生了一些变化，这就是您得到错误的原因。

Answer 2

将MapControl添加到导入中：

import { MapContainer, TileLayer, Marker, Popup, MapControl } from 'react-leaflet'