Google api 将异步YouTube API加载到ReactJS应用程序

我需要加载YouTube JavaScript API，它要求您包含一个脚本标记和一个指向全局回调函数的onload查询字符串。加载Google客户端后，将调用回调：

<script>
function init() {
    gapi.client.setApiKey('465723722VeAji1ZVqYiJxB7oyMTVLI');
    gapi.client.load('youtube', 'v3', function() {
       YouTubeClientLoaded = true;
    });
} 
</script>
<script src="https://apis.google.com/js/client.js?onload=init"></script>

函数init（）{
gapi.client.setApiKey（'465723722VeAji1ZVqYiJxB7oyMTVLI'）；
load（'youtube'，'v3'，function（）{
YouTubeClientLoaded=true；
});
} 

原则上这一切都很好，但我很难想出如何将这个全局回调集成到我的ReactJS应用程序中。我如何告诉react客户端已加载并准备好使用

我有过一些想法，但似乎都是胡思乱想。我考虑启动React应用程序，并设置一个计时器，定期检查

YouTubeClientLoaded

全局变量（或

gapi

对象）或pubsub机制是否存在，以便我的全局初始化函数可以在准备就绪时发出。pubsub路线的问题是pubsub本身也需要是全球性的，那么我如何与React进行通信

---

有没有更正确的方法来实现这一点

为什么不能公开一个从React组件调用render或setState到全局命名空间的回调函数呢？好的，听起来这就是我需要的，但是如何从React组件将回调函数引入全局命名空间呢？您能详细说明一下吗？如果您只有一个组件需要该API，那么您可以预先引入一个全局函数占位符（例如

window.onYoutubeApiLoaded=function（）{}

），并在您的组件构造函数/装载处理程序中覆盖该全局占位符-届时您将拥有对该组件的

引用。如果有多个组件使用api，请以相同的方式使用pubsub-从构造函数/装载处理程序订阅。一个全局回调只是一个穷人的pubsub。嗯，好吧。那么如何在组件构造函数中覆盖它呢？如何从React组件中完全覆盖全局函数占位符？我需要几个使用API的组件，但我如何“以相同的方式使用pubsub”。和什么一样？好吧，我明白了。1.您必须使用
ReactDOM.render
在某处渲染顶级组件。在React文档中查找详细信息
React.createClass
基本上创建一个新的组件类型，而不是作为页面上的某个内容创建组件实例。2.在创建组件实例时，api可能已经加载，组件应检查该情况；所以初始状态类似于
{youtubeAPILoaded:！！window.gapi}