Question

构建一个简单的react项目，并希望添加一个登录页面。目前，没有显示google登录按钮。 div本身会出现，但其中不会显示任何按钮。

index.html

<meta name="google-signin-scope" content="profile email">
<meta name="google-signin-client_id" content="CLIENT_ID.apps.googleusercontent.com">

src / components / Login.js

import React, { Component } from 'react';
class Login extends Component {
    onSignIn(googleUser) {
      console.log("Signing In!")
      var profile = googleUser.getBasicProfile();
      document.getElementById('status').innerHTML = 'Thanks for logging in using Google, ' + profile.getName() + '!';
    }

    render() {
      return (
        <div className="socialwrapper" style={{textAlign: "center", paddingTop: 200}}>
          <script src="https://apis.google.com/js/api:client.js"></script>
          <div className="g-signin2" data-onsuccess="onSignIn"></div>
          <div id="status">"Here is the status"</div>
        </div>
      );
    }
}


export default Login;

不确定什么是错误的。是没有加载index.html？我尝试重新启动服务器，并且我再次检查了CLIENT_ID是否正确。 onSignIn中的console.log不会触发。除此之外，我不确定该怎么办。

Answer 1

渲染器中不能包含脚本标签。您需要在组件上声明导入。

Answer 2

这个问题在深入研究将外部脚本包含到React组件中后得到解决，这是Jun Bin的评论引发的探索。最终，我从this bit of code找到了this tutorial来解决了这个问题。尽管该按钮仍无法完全正常工作，但至少会出现。修改后的代码在下面，如果按钮完全正常工作，我将对其进行编辑。

// src/components/Login.js
import React, { Component } from 'react';
class Login extends Component {
    componentDidMount() {
      (function() {
          var e = document.createElement("script");
          e.type = "text/javascript";
          e.async = true;
          e.src = "https://apis.google.com/js/client:platform.js?onload=gPOnLoad";
          var t = document.getElementsByTagName("script")[0];
          t.parentNode.insertBefore(e, t)
      })();
    }
    onSignIn(googleUser) {
      console.log("Signing In!")
      var profile = googleUser.getBasicProfile();
      document.getElementById('status').innerHTML = 'Thanks for logging in using Google, ' + profile.getName() + '!';
    }

    render() {
      return (
        <div className="socialwrapper" style={{textAlign: "center", paddingTop: 200}}>
          <div className="g-signin2" data-onsuccess="onSignIn"></div>
          <div id="status">Here is the status</div>
        </div>
      );
    }
}

Google登录按钮未在React中呈现

2 个答案: