javascript - 如何告诉谷歌地图 API 加载脚本在 React 组件中寻找回调？

Question

在我的 Rails 应用程序中，我使用 react.js(react-rails gem)来构建我的应用程序的客户端。
我想使用谷歌地图 API 来实现一些地理定位功能。

class HomePage extends React.Component {
    constructor(props) {
        super(props)
    }

   initGeoTools(){
     console.log('callback invoked');
   }

   render () {
       return(
            <div>
            //..
            <script src="https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initGeoTools"
async defer></script>
            </div>
        );
    }
}

initGeoTools 不是函数 - 这意味着 API 脚本在此范围内看不到回调函数。

我在某处读到它应该在窗口范围内看到这个函数。 所以我试图像这样破解它:

class HomePage extends React.Component {
    constructor(props) {
        super(props)
    }

  componentWillMount(){
    window.initGeoTools = function(){
      console.log('callback invoked');
    }
}

   render () {
       return(
            <div>
            //..
            <script src="https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initGeoTools"
async defer></script>
            </div>
        );
    }
}

的确，这行得通，但在这种情况下没有意义，因为从窗口上定义的函数我无法访问 react 组件的东西。

在回调函数中，我想设置状态 api_ready: true 以指示 API 已成功加载。

所以问题是我如何告诉 API 脚本在 React 组件中寻找回调函数？

Answer 1

一周前我要做一个 map 组件，我找到了this article他们使用了三个脚本:

• 一个用于缓存外部脚本；
• 使用第一个调用 Google Maps Api；
• 最后一个是包装器组件，您可以使用它来连接作为 Prop 传递给包装组件的 map api。