为什么我得到的“地图”不是从“反应传单”中导出的？

Question

为什么我得到：

./src/components/mapComponent/MapView.jsx
Attempted import error: 'Map' is not exported from 'react-leaflet'.

我在组件中导入它：

import React, { Component } from "react";
import { Map, TileLayer } from "react-leaflet";
import "leaflet/dist/leaflet.css";

这让我感到困惑，因为代码中的所有内容看起来都是正确的....

Answer 1

尝试使用MapContainer 组件。

MapContainer 组件负责使用 React Context 创建 Leaflet Map 实例并将其提供给其子组件。

创建 MapContainer 元素时，其 props 用作创建 Map 实例的选项。

现在您必须导入 MapContainer。

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

<MapContainer
  className="markercluster-map"
  center={[51.0, 19.0]}
  zoom={4}
  maxZoom={18}
>
  <TileLayer
    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
    attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
  />
</MapContainer>

Answer 2

改成。Map​MapContainer

import { MapContainer, TileLayer } from "react-leaflet";