首页 文章

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

提问于
浏览 次
18

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

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

enter image description here

enter image description here

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

有什么想法吗？

google-maps reactjs webpack create-react-app

4 回答

  • 1

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

    const google = window.google;

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

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

    回复于
  • 3

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

    /*global google*/
    回复于
  • 45

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

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

    要么

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

    如果 google 可用，那么如果没有则没有问题，那么将分配为空，直到加载脚本为止 .

    回复于
  • 2

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

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

const google = window.google;

class MapComponent extends Component {
....

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

export default withGoogleMap(MapComponent);
    回复于

相关问题