加载React组件时未定义gapi

我正在尝试集成 Google 登录（link https://developers.google.com/identity/sign-in/web/sign-in）使用反应。
我发现一个问题过去已经解决了这个问题使用带有 React 2 的 google 登录按钮 https://stackoverflow.com/questions/31640234/using-google-sign-in-button-with-react-2

我重复了上述相同的步骤。在我的index.html I do

<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>

Then my Component好像

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;

当我使用运行程序时yarn start, I get

/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)

完整的源代码位于https://github.com/hhimanshu/google-login-with-react https://github.com/hhimanshu/google-login-with-react

有人可以帮我理解我的错误吗？

Thanks

在我看来，您正在将 google api 作为脚本标记加载，我们希望将其设置为window.gapi到谷歌API。然而，你然后运行 ​​eslint 或其他一些检查器，并且不知道window.gapi应该存在。它失败了，因为它看到您使用了未声明的变量。

一个廉价的解决方法是告诉 Eslint 你知道自己在做什么；

/* global gapi */

将其放在文件的顶部，eslint 将处理gapi作为已知的全局变量。