谷歌没有使用create-react-app在react应用程序中定义

Question

我使用名为create-react-app的cli创建了一个react应用程序.看起来Facebook在下面做了很多事情,比如webpack等.但是,我想它可能也有一些局限性.我尝试按照本教程加载谷歌地图API.当我调试我的代码时,我可以看到谷歌地图已被成功引用..

但后来我点击播放,让应用程序运行完毕.我得到谷歌没有定义从webpackHotDevClient.js错误和我的应用程序崩溃.

由于webpack动态编译文件,我认为通过https加载谷歌地图有困难吗？

有什么想法吗？

Answer 1

如用户指南中所述,您需要显式读取任何全局变量window.把它放在文件的顶部,它将工作:

const google = window.google;

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

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

Answer 2

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

/*global google*/

Answer 3

我有一个更好的解决方案然后@Dan's 你可以这样做

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

或者

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

如果google可用，那么没问题，如果不可用，则将临时分配空对象，直到加载脚本为止。

如果es-lint抛出未定义的谷歌错误，请更新eslint 配置文件中的全局变量：

{
    "globals": {
        "google": "readonly"
    }
}

或者

对于特定文件用例，在文件顶部定义如下

/*global google*/

Answer 4

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

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

const google = window.google;

class MapComponent extends Component {
....

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

export default withGoogleMap(MapComponent);