Google Calendar Api React 'gapi not found'答案

【问题标题】：Google Calendar Api React 'gapi not found'Google Calendar Api React 'gapi not found'
【发布时间】：2017-08-15 11:25:17
【问题描述】：

我是 google 日历 api 的新手并做出反应，所以我确定我在这里缺少一些小东西。我无法导入必要的 google api 库来调用“gapi”。我尝试像从本地库一样导入它们，但仍然收到错误“未定义 gapi”。我需要在我的组件中使用“gapi”，所以我认为我不能使用 componentDidLoad 调用脚本并将其附加到正文。

  // Libraries
    import React, {Component} from 'react';

    //...import other libraries

    //import google libraries in order to use "gapi" and call "checkAuth"
   import 'https://ajax.googleapis.com/ajax/libs/angularjs/1.2.32/angular.min.js';
   import 'https://apis.google.com/js/client.js?onload=checkAuth';';


    var CLIENT_ID = 'MY_CLIENT_ID_IS_HERE';

    var SCOPES = ["https://www.googleapis.com/auth/calendar"];

    class NewCalendar extends Component {
      constructor(props) {
        super(props);

        this.checkAuth = this.checkAuth.bind(this);
      }

        checkAuth() {
          console.log('checkAuth running...')
          gapi.auth.authorize(   //ISSUE

^最后一行的问题

            {
              'client_id': CLIENT_ID,
              'scope': SCOPES.join(' '),
              'immediate': true
            }, this.handleAuthResult);
        }
    ...
    }

    export default NewCalendar;

有人知道如何解决这个问题吗？

谢谢一百万。

【问题讨论】：

标签： javascript reactjs google-api

【解决方案1】：

我在类似的问题上苦苦挣扎。我就是这样解决的。在这种情况下，您需要放置窗口。范围在前面。但是直到现在你才找到一个解决方案；）无论如何都想分享这个，也许这不是最好的解决方案，但对我来说暂时有用。

componentDidMount() {
    this.loadApi();
}

loadApi() {
    const script = document.createElement("script");
    script.src = "https://apis.google.com/js/api.js";
    document.body.appendChild(script);

    script.onload = () => { 
        window.gapi.load('client:auth2', this.checkAuth.bind(this));
    }
}

再见

【讨论】：

是的，这也是我最终解决的方法。也很高兴在这里为其他人提供答案

【解决方案2】：

我对 React 和 JSX 还很陌生，但似乎您可能有想法在这里回答您的问题：

似乎 import 仅适用于本地文件，您需要异步加载 gapi (https://jsx.github.io/doc/importref.html)

希望有帮助

【讨论】：

【解决方案3】：

将您的https://apis.google.com/js/api.js 放在您的index.html 文件内的一个脚本标签内，在您的元标签下方。应该是这样的。

然后在浏览器中，刷新页面并在 JavaScript 控制台中，您应该能够写出 gapi 并且您应该能够看到像这样的对象：{load: f}。

该对象将是您浏览器的 window 范围内可用的 Google API。

【讨论】：