reactjs - 为什么我得到 'Map' 不是从 'react-leaflet' 导出的？

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 component 。

The MapContainer component is responsible for creating the Leaflet Mapinstance and providing it to its child components, using a ReactContext.

When creating a MapContainer element, its props are used as options tocreate the Map instance.

现在您必须导入 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>