Javascript 如何告诉GoogleMapsAPI加载脚本在React组件中查找回调？

在我的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>
        );
    }
}

类主页扩展React.Component{
建造师（道具）{
超级（道具）
}
initGeoTools（）{
log（“调用回调”）；
}
渲染（）{
返回(
//..
);
}
}

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.Component{
建造师（道具）{
超级（道具）
}
组件willmount（）{
window.initGeoTools=函数（）{
log（“调用回调”）；
}
}
渲染（）{
返回(
//..
);
}
}

事实上，这是可行的，但在这种情况下没有意义，因为从窗口上定义的函数中，我无法访问react组件内容

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

---

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

一周前，我必须做一个映射组件，我发现他们在哪里使用了三个脚本：

• 一个用于缓存外部脚本
• 一个是使用第一个调用GoogleMapsAPI
• 最后一个是包装器组件，您可以使用它连接作为道具传递给包装组件的maps api