google 未使用 create-react-app 在 React 应用程序中定义

Question

我使用名为 create-react-app 的 cli 创建了一个 React 应用程序。看起来 Facebook 在底层做了很多事情，比如 webpack 等。但是，我想它可能也有一些局限性。我试着关注 this tutorial to load google map api. And when I debug my code, I can see the google map has been successfully referenced..

但随后我单击播放并让应用程序完成运行。我从 webpackHotDevClient.js 收到 google is not defined 错误，我的应用程序崩溃了。

由于 webpack 会即时编译文件，我认为它无法通过 https 加载 google 地图？

有什么想法吗？

Answer 1

如 user guide 中所述，您需要从 window 中显式读取任何全局变量。把它放在文件的顶部，它将起作用：

const google = window.google;

我们强制执行此操作的原因是人们通常会误解局部变量、导入模块和全局变量之间的区别，因此我们希望在您使用全局变量时始终在代码中明确说明。

顺便说一下，这与 Webpack 或 HTTPS 无关。你看到这个是因为我们使用了一个禁止未知全局变量的 linting 规则。

Answer 2

我认为当您从 html 中的脚本导入 google 地图时，google 变量已经可用。此错误由 Eslint 引起，您可以尝试将以下行添加到文件顶部以禁用 ESlint

/*global google*/

Answer 3

您好，您可以像这样使用 withGoogleMap：

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

const google = window.google;

class MapComponent extends Component {
....

<GoogleMap>
.....
.....
.....
</GoogleMap>

export default withGoogleMap(MapComponent);

Answer 4

我有比@Dan 更好的解决方案，你可以这样做

window.google = window.google ? window.google : {}

或

const google = window.google = window.google ? window.google : {}

如果 google 可用则没有问题，否则将分配空值，直到您的脚本加载完毕。

Answer 5

.eslintrc.json

{
    // ...
    "globals": {
     "google": "readonly"
    }
}

google 未使用 create-react-app 在 React 应用程序中定义

google is not defined in react app using create-react-app

google-maps

reactjs

webpack

create-react-app