javascript - 在与 webpack 进行 react 时导入react-leaflet会返回错误

Question

我试图简单地导入react-leaflet，而不在我的项目中渲染任何 map ，但它给了我这个错误。

TypeError: Object(...) is not a function

我确信它来自导入语句。它甚至在第 2 行的错误中指出了它。这是我的代码。

import React from 'react'
import { Map } from 'react-leaflet'

export default class MyMap extends React.Component {
  constructor() {
    super()
    this.state = {
      lat: 51.505,
      lng: -0.09,
      zoom: 13
    }
  }

  render() {
    return (
        <div><h1>E</h1></div>
    );
  }
}

代码在没有 import 语句的情况下可以正常工作。我在这里做错了什么？

Answer 1

查看react-leaflet网站(https://react-leaflet.js.org/)，看起来Map组件是一个命名导出。导入命名导出时，您需要用大括号括住要导入的组件:

import { Map } from 'react-leaflet';

有关命名和默认导出的一些信息 here

我自己没有使用过react-leaflet，但是浏览他们的网站，他们似乎有一些很好的例子来帮助你入门。 It may be worth taking a look if you're new to it.