GoogleMap JSX组件中未定义的variables

在我的应用程序中，从我的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 

仔细查看代码。 variables“谷歌”是真的没有在我的代码之前任何地方定义。

我的问题是：

1. variables“google”在哪里定义？
2. 为什么客户端渲染执行OK，而服务器端抛出错误？

非常感谢你的解释。

Answer 1

googlevariables来自https://maps.googleapis.com/maps/api/js在客户端asynchronous加载 。

在服务器上，这个脚本没有被加载，并且事件中断。 看来你使用的组件不是完全同构的，所以它只会在客户端工作。

我过去一直使用谷歌地图反应 ，强烈推荐和完全同构。