Question

我是谷歌日历api的新手并做出反应，所以我确信这里有一些小的东西。我无法导入必要的谷歌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;

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

万分感谢。

Answer 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));
    }
}

再见

Answer 2

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

似乎导入仅适用于本地文件，并且您需要异步加载gapi（https://jsx.github.io/doc/importref.html）

希望有所帮助

Answer 3

将https://apis.google.com/js/api.js放在index.html文件内的脚本标记内，位于meta标记下方。就是这样。

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

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

谷歌日历Api React'找不到gapi'

3 个答案: