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

我需要在我的应用程序中执行一些操作。 1.将谷歌地图API 2.初始化我的地图 3.获取到google变量的引用，并用它来使事件侦听器和扩展，它包含如何正确地扩展从React的外部网站加载的JS类

现在我使用的是ImageOverlay类this pattern所以我可以通过window.google参考google。然后在我的initMap，我设置了一个事件侦听器，并做 ```

ImageOverlay.prototype = new window.google.maps.OverlayView(); 

function ImageOverlay(bounds, image, map) { 
    ...do constructory stuff 
    } 

    ImageOverlay.prototype.onAdd = function() { 

    ... 
    };

创建我需要（从the G Maps docs）类。我想将这些代码移到一个外部文件中，但我一直在坚持如何清理它。我收到错误，如'ImageOverlay' is not defined。如果我尝试将它变成ES6类（export default class ImageOverlay extends window.google.maps.OverlayView {，然后import 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'])(MapContainer)这个组件，但是，确实import Map在顶部，这反过来，确实import ImageOverlay，这当然是失败的，因为google尚未确定。

来源

2017-07-14 ahota

好了，这里就是我最终解决它：

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（可动态进口）而不是在阵营文件的顶部导入。然后你可以确保window.google.maps可以访问，并且该类不会尝试扩展，直到加载了api。您甚至可以通过maps作为Map组件的道具。

来源

2017-07-14 17:30:08 ahota

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

回答

相关问题