即使在 React js 中导入传单包后，LeafletMap 仍显示错误

Question

我正在开发一个 covid 应用程序，它显示所有三波中的 covid 死亡率，特别是我的国家印度，但是这里的问题是当我尝试使用传单包时，它显示错误

import React from "react";
import { Map as LeafletMap, TileLayer } from "react-leaflet";
import "./Map.css";
import { showDataOnMap } from "./util";

function Map({ countries, casesType, center, zoom }) {
  return (
    <div className="map">
      <LeafletMap center={center} zoom={zoom}>
        <TileLayer
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
          attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        />
        {showDataOnMap(countries, casesType)}
      </LeafletMap>
    </div>
  );
}

export default Map;

这个包名：Map.js

即使我在终端中运行导入传单的 cmd：npm i react-leaflet，但它仍然显示错误，请帮助任何人

这是显示的本地主机错误

Answer 1

问题是您正在尝试导出与您分配给 LeafletMap 的 Map 具有相同名称的函数 Map，请尝试更改您的函数名称，例如

import React from "react";
import { Map as LeafletMap, TileLayer } from "react-leaflet";
import "./Map.css";
import { showDataOnMap } from "./util";

function NewMap({ countries, casesType, center, zoom }) {
  return (
    <div className="map">
      <LeafletMap center={center} zoom={zoom}>
        <TileLayer
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
          attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        />
        {showDataOnMap(countries, casesType)}
      </LeafletMap>
    </div>
  );
}

export default NewMap;

Answer 2

您可以使用以下代码片段导入地图。它肯定会起作用：

import { MapContainer as LeafletMap, TileLayer } from "react-leaflet"

我们需要从依赖项中导入内容。因此，当依赖项更新时，可能会出现此问题，因此您需要检查导入的内容。

即使在 React js 中导入传单包后，LeafletMap 仍显示错误

LeafletMap is showing error even after importing the leaflet package in react js

javascript

reactjs

leaflet

react-leaflet