使用create-react-app

Question

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

然后我点击播放并让应用程序运行完毕。我的google没有定义来自webpackHotDevClient.js的错误，我的应用程序崩溃了。

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

有什么想法吗？

Answer 1

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

const google = window.google;

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

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

Answer 2

我认为当您从html中的脚本导入谷歌地图时，谷歌变量已经可用。由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 : {}

OR

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

如果google可用，那么在你的脚本加载之前，如果没有那么空就会被分配。

Answer 5

.eslintrc.json

#include <stdio.h>
#include <stdlib.h>
#include <stdint.h>
#include <inttypes.h>
#include <time.h>
#include <string.h>


void print128(__uint128_t u) {
  if (u>9) print128(u/10);
  putchar(48+(int)(u%10));
}

typedef __uint128_t u128;
uint64_t wyhash64_x;


uint64_t wyhash64() {
  wyhash64_x += 0x60bee2bee120fc15;
  __uint128_t tmp;
  tmp = (__uint128_t) wyhash64_x * 0xa3b195354a39b70d;
  uint64_t m1 = (tmp >> 64) ^ tmp;
  tmp = (__uint128_t)m1 * 0x1b03738712fad5c9;
  uint64_t m2 = (tmp >> 64) ^ tmp;
  return m2;
}

int main() {
  u128 vals128[1000000];
  u128 lower;
  u128 higher;

  for (int i = 0; i < 1000000; i++) {
    lower = (u128) wyhash64();
    higher = (u128) wyhash64();
    higher = higher << 64;
    vals128[i] = lower + higher;
  }
    print128(vals128[0]);
    printf("\n"); 
}