Google Calendar Api React 'gapi not found'

Question

私はGoogleカレンダーのAPIを初めて使用しているので、ここには何か小さなものがあると確信しています。私は "gapi"を呼び出すために必要なGoogleのAPIライブラリをインポートすることはできません。私は地元の図書館のようにそれらをインポートしようとしましたが、 "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

私は同様の問題で苦労しました。私はそれをどのように解決したのですか？この場合、ウィンドウを置く必要があります。スコープinfront。しかし、これまでに解決策を見つけたことはありませんでした;）とにかくこれを共有したいのであれば、それは最良の解決策ではないかもしれませんが、私にとっては瞬間のために働きます。

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

私はかなり反応するように新しいとJSXだが、あなたがここにあなたの問題に答えるためにアイデアを持っているかもしれないと思わ：

• GAPI is not defined - ReactJS - Google Sheets
• https://github.com/anthonyjgrove/react-google-login/blob/master/src/index.js#L33

輸入のみのために働くようですローカルファイルを作成し、ギャップの非同期ロードにする必要があることを確認してください（https://jsx.github.io/doc/importref.html）

希望があれば