react-leaflet-draw导入报错：'MapControl'未从react-leaflet导出问题

这个错误的核心原因是react-leaflet-draw版本与你当前安装的react-leaflet版本不兼容。react-leaflet从v3版本开始重构了API结构，MapControl的导出方式发生了变化，而旧版的react-leaflet-draw仍然按照react-leaflet v2的逻辑进行导入，导致了这个导入错误。

下面是具体的解决步骤：

1. 确认依赖版本匹配 #

首先查看你当前package.json中react-leaflet的版本：

• 如果你的react-leaflet是v3.x，需要安装react-leaflet-draw@^0.20.4
• 如果你的react-leaflet是v4.x，可以安装最新版的react-leaflet-draw（目前是^0.20.6，已经适配了v4）

执行对应的安装命令：

# 适配react-leaflet v3
npm install react-leaflet-draw@0.20.4

# 适配react-leaflet v4
npm install react-leaflet-draw@latest

2. 修正代码并添加EditControl #

安装正确版本后，你可以移除手动导入的MapControl（新版react-leaflet-draw不需要你单独引入它），并把EditControl组件添加到MapContainer内部。修正后的代码示例：

import './App.css';
import 'leaflet/dist/leaflet.css';
import { MapContainer, TileLayer, Marker, Popup } 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>
      {/* 添加绘图控件 */}
      <EditControl
        position="topright"
        onCreated={(e) => console.log('创建了图形:', e)}
        onEdited={(e) => console.log('编辑了图形:', e)}
        onDeleted={(e) => console.log('删除了图形:', e)}
        draw={{
          // 配置允许绘制的图形类型
          polygon: true,
          polyline: true,
          rectangle: true,
          circle: true,
          marker: true,
        }}
      />
    </MapContainer>
  );
}

export default App;

3. 验证运行 #

重新启动你的React项目，应该就可以正常加载绘图控件，不会再出现导入错误了。

总结：react-leaflet-draw完全可以在React项目中使用，只是需要注意它和react-leaflet、leaflet的版本兼容性，确保三者版本匹配即可。

内容的提问来源于stack exchange，提问作者Giox