本文介绍了反应传单和反应-传单-抽签的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在尝试实现传单地图上的绘制功能。我使用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='&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;

此包有什么问题?它对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在库中内部使用,可能在较新版本中发生了某些更改,这就是您收到错误的原因。

这篇关于反应传单和反应-传单-抽签的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

05-18 10:11