在 reactjs 中使用外部 JS 脚本

Question

我正在尝试使用 google maps JS API 的 containsLocation 位做一些工作，并且我正在努力协调 react 中的函数调用。 在包含的 js fiddle ( https://jsfiddle.net/4pearvsj/ ) 中，一切都很好，如果一组给定的坐标位于多边形内，我计划稍微重写代码以返回 true 或 false。

我遇到的麻烦是调用

var bermudaTriangle = new google.maps.Polygon({})

我的 App.js 文件中的函数。 我将脚本包含在我的 index.html 中，但是当我在 App.js 文件中调用该函数时，我收到错误“无法读取未定义的属性‘地图’”。 我知道 google-map-react 包，但我不相信我可以在这个包中使用 containsLocation 功能。 我的问题是如何在不使用 google-map-react 包的情况下在我的 React 应用程序中正确访问此 API？

Answer 1

您收到X of undefined错误的X of undefined因为在安装应用程序时，代码在 google 在页面上初始化之前运行过一次。

在尝试访问窗口componentDidMount()上的 google 之前，您应该等待您的应用程序挂载，但也要包装检查以确保它已准备就绪。

在 React 中，您仍然可以在 HTML Head 中嵌入一个脚本标签，该标签将匹配小提琴并按预期与 src + 回调一起工作