反应 - 谷歌地图不会加载答案

【问题标题】：React - Google Map Will Not Load反应 - 谷歌地图不会加载
【发布时间】：2018-08-03 01:47:21
【问题描述】：

我正在关注有关使用 Google Maps api 实现 React 的在线教程。我一直在尝试构建我的地图组件，并且完全按照交付的说明进行操作。但是，当我尝试在浏览器中加载我的页面时，没有显示任何内容，并且存在一些我难以解决的控制台错误。

下面是我的简单 HTML 页面

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY&libraries=visualization"></script>
    </head>
    <body>
        <div id="app"></div>
        <script type="text/javascript" src="build/bundle.js" ></script>
    </body>
</html>

这是我的 app.js 文件

import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import Map from './components/Map'
import Places from './components/Places'

class App extends Component {
    render() {
        const location = {
            lat: 28.5962,
            lng: 81.3064
        }

        return (
            <div>
                This is the REACT APP!
                <div style={{width: 300, height:600, background: '#777'}}>
                    <Map center={location} />
                </div>

                <Places />
            </div>
        )
    }
}

ReactDOM.render(<App />, document.getElementById('app'))

下面是我认为导致问题的 Map.js 文件。

import React, { Component } from 'react';
import { GoogleMapLoader, GoogleMap, Marker } from 'react-google-maps';
import GoogleMapLoader from "react-google-maps-loader"

class Map extends Component {
    render(){
        const mapContainer = <div style={{height: '100%', width:'100%'}}></div>

        return (
            <GoogleMapLoader
                containerElement = { mapContainer }
                googleMapElement =  {
                    <GoogleMap
                        defaultZoom={15}
                        defaultCenter={this.props.center}
                        options={{streetViewControl: false, mapTypeControl: false}}>
                    </GoogleMap>
                } />
        )
    }
}

export default Map

这是我的 webpack.config.js 文件，它将我的 JSX 代码转换为 ES2015

let webpack = require("webpack");
let path = require('path');

module.exports = {
    entry: {
        app: './src/app.js'
    },
    output: {
        filename: 'build/bundle.js',
        sourceMapFilename: 'build/bundle.map'
    },
    devtool: '#source-map',
    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                exclude: /(node_modules|bower_components)/,
                loader: 'babel-loader',
                query:{
                    presets:['react', 'es2015']
                }
            }
        ]
    }
}

这是一个小提琴，其中包含链接到我的 html 页面的 bundle.js 代码。

Fiddle containing bundle.js code

当我尝试在浏览器中打开时，我收到以下控制台错误

警告：React.createElement：类型无效 - 应为字符串（用于内置组件）或类/函数（用于复合组件）但得到：未定义。您可能忘记从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入。

检查Map的渲染方法。在地图中（由 App 创建）在 div 中（由 App 创建）在 div 中（由 App 创建）应用内 invariant.js:49 未捕获的错误：元素类型无效：需要字符串（对于内置组件）或类/函数（对于复合组件）>但得到：未定义。您可能忘记从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入。

检查Map的渲染方法。在不变（invariant.js:42）在 createFiberFromElement (react-dom.development.js:5753) 在 reconcileSingleElement (react-dom.development.js:7531) 在 reconcileChildFibers (react-dom.development.js:7635) 在 reconcileChildrenAtExpirationTime (react-dom.development.js:7756) 在 reconcileChildren (react-dom.development.js:7747) 在finishClassComponent (react-dom.development.js:7881) 在 updateClassComponent (react-dom.development.js:7850) 在 beginWork (react-dom.development.js:8225) 在 performUnitOfWork (react-dom.development.js:10224) react-dom.development.js:9747 组件出现上述错误：在地图中（由 App 创建）在 div 中（由 App 创建）在 div 中（由 App 创建）应用内

react-dom.development.js:10994 未捕获的错误：元素类型无效：需要一个字符串（对于内置组件）或一个类/函数（对于>复合组件）但得到：未定义。您可能忘记从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入。

检查Map的渲染方法。在不变（invariant.js:42）在 createFiberFromElement (react-dom.development.js:5753) 在 reconcileSingleElement (react-dom.development.js:7531) 在 reconcileChildFibers (react-dom.development.js:7635) 在 reconcileChildrenAtExpirationTime (react-dom.development.js:7756) 在 reconcileChildren (react-dom.development.js:7747) 在finishClassComponent (react-dom.development.js:7881) 在 updateClassComponent (react-dom.development.js:7850) 在 beginWork (react-dom.development.js:8225) 在 performUnitOfWork (react-dom.development.js:10224)

我认为问题出在 GoogleMapLoader 上，这就是我为 react-google-maps-loader 添加导入的原因，但显然不是这样。我也从使用 Webstorm 切换到 Sublime Text，因为我读到 Webstorm 在将 JSX 转换为 ES2015 代码时存在问题，但这也不是问题。有什么我遗漏的吗？

【问题讨论】：

标签： reactjs react-google-maps

【解决方案1】：

您面临的错误表明React.createElement 正在接收未定义而不是组件实例或内置元素字符串（例如“div”）。最常见的一种可能性是您忘记安装 react-google-maps 包（我已经发生过几次）。

此外，在初始化 Map 组件之前，您需要将其包装在一个名为 withGoogleMap 的高阶组件下。

import { GoogleMap, Marker, withGoogleMap } from "react-google-maps"

const Map = withGoogleMap((props) => 
   <GoogleMap {...props} />

export default Map;

这个插件还包括一个名为 withScriptjs 的 HOC，以防您没有在结束正文标记之前添加 Google 地图脚本：

import { GoogleMap, Marker, withGoogleMap, withScriptjs } from "react-google-maps"

const Map = withScriptjs(withGoogleMap(props => 
    <GoogleMap {...props} />

export default Map;

更多信息在这里：https://tomchentw.github.io/react-google-maps/。

【讨论】：