时间戳

首页 > 解决方案 > 在与 webpack 反应中导入 react-leaflet 返回错误

javascript - 在与 webpack 反应中导入 react-leaflet 返回错误

问题描述

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

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 语句，代码可以正常工作。我在这里做错了什么？

标签： javascriptreactjswebpackreact-leaflet

解决方案

查看 react-leaflet 网站（https://react-leaflet.js.org/），看起来 Map 组件是一个命名导出。导入命名导出时，您需要用花括号将要导入的组件包装起来：

import { Map } from 'react-leaflet';

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

我自己没有使用过 react-leaflet，但是查看他们的网站，他们似乎有一些很好的例子可以帮助你入门。如果您是新手，可能值得一看。

推荐阅读