Question

正如标题所提到的，我似乎无法加载按钮。

我没有收到任何错误。 Hi文本正在渲染，但没有按钮。

的index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="google-signin-client_id" content="....apps.googleusercontent.com">
    <script src="https://apis.google.com/js/platform.js" async defer></script>

    <title>React App</title>
  </head>
  <body>
    <div id="root"></div>


  </body>
</html>

index.js

const App = () => (
    <MuiThemeProvider>
        <SignIn />
    </MuiThemeProvider>
);
ReactDOM.render(<App />, document.getElementById('root'));

Login.js

/* global gapi */

import React from 'react';


class SignIn extends React.Component{

    constructor(props){
        super(props);
        this.onSignIn = this.onSignIn.bind(this)
    }

    componentDidMount() {
        console.log('this mounted')
        gapi.signin2.render('g-signin2', {
            'scope': 'profile email',
            'width': 200,
            'height': 50,
            'longtitle': true,
            'theme': 'dark',
            'onsuccess': this.onSignIn,
        });
    }


    onSignIn(googleUser) {
        var profile = googleUser.getBasicProfile();
        console.log('ID: ' + profile.getId()); // Do not send to your backend! Use an ID token instead.
        console.log('Name: ' + profile.getName());
        console.log('Image URL: ' + profile.getImageUrl());
        console.log('Email: ' + profile.getEmail()); // This is null if the 'email' scope is not present.
    }

    render() {
        return(
            <div>
                <div>Hi</div>
                <div id="my-signin2" data-onsuccess={this.onSignIn}></div>
            </div>
        )
    }


}

export default SignIn

我做错了什么？

Answer 1

gapi.signin2.render(..)中的第一个参数是按钮的ID。

您正在通过g-signin2，而应该是my-signin2。

使用带有React的Google登录按钮，无法加载按钮

1 个答案: