gapi nie jest zdefiniowany podczas ładowania React Component

Question

Próbuję zintegrować Google Sign In (link) za pomocą React.
znalazłem pytanie, które ma rozwiązać ten w minionym Using google sign in button with react 2

I powtórzone te same kroki, jak wspomniano. W moim index.html zrobić

<script src="https://apis.google.com/js/platform.js?onload=triggerGoogleLoaded" async defer></script> 
    <script type="text/javascript"> 
     function triggerGoogleLoaded() { 
      console.log("google event loaded"); 
      window.dispatchEvent(new Event('google-loaded')); 
     } 
    </script> 

wtedy mój Component wygląda

var LoginButton = React.createClass({ 

    onSignIn: function(googleUser) { 
     console.log("user signed in"); // plus any other logic here 
    }, 

    renderGoogleLoginButton: function() { 
     console.log('rendering google signin button'); 
     gapi.signin2.render('my-signin2', { 
      'scope': 'https://www.googleapis.com/auth/plus.login', 
      'width': 200, 
      'height': 50, 
      'longtitle': true, 
      'theme': 'light', 
      'onsuccess': this.onSignIn 
     }) 
    }, 

    componentDidMount: function() { 
     window.addEventListener('google-loaded',this.renderGoogleLoginButton); 
    }, 

    render: function() { 
     let displayText = "Sign in with Google"; 
     return (
      <div class="g-signin2" data-onsuccess="onSignIn"></div> 
     ); 
    } 

}); 

export default LoginButton; 

Kiedy uruchomić program za pomocą yarn start, mam

/Users/Harit.Himanshu/bl/sources/webs/google-login/src/LoginButton.js 
    11:9 error 'gapi' is not defined        no-undef 
    26:13 warning 'displayText' is assigned a value but never used no-unused-vars 

✖ 2 problems (1 error, 1 warning) 

Kompletny kod źródłowy jest dostępny na https://github.com/hhimanshu/google-login-with-react

Coul d kogoś proszę pomóż mi zrozumieć mój błąd?

Dzięki

Answer 1

Wydaje mi jakbyś ładowania API Google jako tagu skrypt, który chcielibyśmy oczekiwać, aby ustawić window.gapi do API Google. Jednakże używasz programu eslint lub innego kontrolera, który nie ma pojęcia, że ​​istnieje, aby istniała window.gapi. Zawodzi, ponieważ widzi, że używasz niezadeklarowanej zmiennej.

Tanim rozwiązaniem jest poinformowanie Eslint, że wiesz, co robisz;

/* global gapi */ 

Umieścić to na początku pliku i eslint potraktuje gapi znany jako zmienną globalną.

Answer 2

To zadziałało dla mnie. Umieścić go w componentDidMount lub konstruktora:

componentDidMount() { 
    gapi.load('auth2',() => { 
     // Retrieve the singleton for the GoogleAuth library and set up the client. 
     this.auth2 = gapi.auth2.init({ 
      client_id: '436676563344-.apps.googleusercontent.com', 
      cookiepolicy: 'single_host_origin', 
     }); 

     this.auth2.attachClickHandler(this.refs.googleButton, {}, 
      (googleUser) => { 
       this.googleLogin(googleUser.getBasicProfile()); 
      }, (error) => { 

      }); 
    }); 
}