Javascript 如何正确地扩展React中从外部站点加载的JS类

我需要在我的应用程序中做一些事情。 1.加载谷歌地图API 2.在我的地图上 3.获取对

google

变量的引用，并使用它生成事件侦听器并扩展它包含的ImageOverlay类

现在我正在使用，所以我可以通过

window.google

引用

google

。然后在initMap中，我设置了一个事件侦听器 ```

创建我需要的类（从）。我想把这段代码移到一个外部文件中，但我一直在想如何清理它。我收到错误，例如未定义“ImageOverlay”。如果我尝试将其放入ES6类（

导出默认类ImageOverlay extends window.google.maps.OverlayView{

，然后

导入ImageOverlay…

）它失败是因为

window.google

尚未定义。所以我的问题是，如何正确加载该类并扩展它？如果需要提供更多细节/澄清任何内容，请告诉我。TIA

---

替代问题：我使用

react async script loader

加载API:

export default scriptLoader（[]https://maps.googleapis.com/maps/api/js?key=whoop&callback=initMap&libraries=visualization“]）（映射容器）

然而，这个组件在顶部导入地图，而这反过来导入ImageOverlay，这当然会失败，因为google还没有定义。

好吧，下面是我如何解决它的：

import scriptLoader from 'react-async-script-loader'
class MapContainer extends Component {...}

export default scriptLoader(['https://maps.googleapis.com/maps/api/js?key=mykey&libraries=visualization'])(MapContainer)

....

class Map extends Component {
  componentDidMount() {
    var ImageOverlay = require('../Util/ImageOverlay.js').default;

...
export default class ImageOverlay extends window.google.maps.OverlayView { ... }

最大的问题是使用

require（~）.default

（可以动态导入）而不是React文件顶部的导入。然后您可以确保

window.google.maps

是可访问的，并且在加载api之前，该类不会尝试扩展它。您甚至可以将

映射

作为道具传递给

映射

组件

import scriptLoader from 'react-async-script-loader'
class MapContainer extends Component {...}

export default scriptLoader(['https://maps.googleapis.com/maps/api/js?key=mykey&libraries=visualization'])(MapContainer)

....

class Map extends Component {
  componentDidMount() {
    var ImageOverlay = require('../Util/ImageOverlay.js').default;

...
export default class ImageOverlay extends window.google.maps.OverlayView { ... }