反应传单和反应-传单-抽签
我正在尝试实现传单地图上的绘制功能。我使用npx create-reaction-app和以下安装的软件包创建了一个仅安装了REACTION-LEAFLET的新应用程序:
- NPM安装Reaction-dom宣传单
- NPM安装Reaction-宣传单
此时,我已经启动了应用程序,一切工作正常:地图显示正确,中间有一个标记。
然后我添加了REACTION-LEAFLE-DRAW包,使用NPM安装REACT-LEAFLE-DRAW,并将其导入页面,我得到以下错误:
./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='© <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;
此包有什么问题?它对Reaction起作用吗?
解决方案
如果您选中此github issue,您将得出结论:react-leaflet-draw
只与react-leaflet
版本2.x兼容,而与版本3.x不兼容。
因此,它在您的情况下不起作用,因为您使用的是Reaction单张版本3.x。
如果您降级到版本2.x,应该可以正常工作
最后但并非最不重要的一点是,您不需要导入MapControl
,因为它不是包中必需的。您只需导入
import { EditControl } from "react-leaflet-draw"
就像你已经做的那样。MapControl
在库中内部使用,可能在较新版本中发生了某些更改,这就是您收到错误的原因。
相关文章