javascript - GoogleMap JSX 组件中的 undefined variable

Question

在我的应用程序中，我的 Google Map JSX 组件(由其他人编写)的开头有以下代码片段:

import React from 'react';
import { Button } from 'react-bootstrap';
import {GoogleMapLoader, GoogleMap, Marker, InfoWindow, DirectionsRenderer} from 'react-google-maps';
import {
  default as canUseDOM,
} from "can-use-dom";
const DirectionsService = new google.maps.DirectionsService();

当我使用客户端渲染并在客户端上执行此代码时，它运行时没有错误并具有预期的行为。但是，当我使用 ReactDOM.renderToString() 切换到服务器端渲染时，我遇到了以下错误:

var DirectionsService = new google.maps.DirectionsService();
                            ^
ReferenceError: google is not defined

详细看代码。在我的代码之前，变量“google”实际上并没有在任何地方定义。

我的问题是:

1. 变量“google”在哪里定义？
2. 为什么客户端渲染正常，而服务器端却报错？

非常感谢您的解释。

Answer 1

变量google 来自https://maps.googleapis.com/maps/api/js，即loaded在客户端上异步。

在服务器上，这个脚本没有加载，事情就崩溃了。出现 component you are using不是完全同构的，所以它只能在客户端工作。

我用过 google-map-react在过去，强烈推荐和完全同构。