Verwendung der Google-Anmelde-Schaltfläche mit react 2

8

Dies ist im Wesentlichen dieselbe Frage wie Google-Anmelde-Schaltfläche mit react aber die akzeptierte Antwort löst es in meinem Fall nicht.

Ich habe eine Reaktionskomponente:

%Vor%

Aber während die Anmeldung erfolgreich ausgeführt wird, wird die Funktion onSignIn nie aufgerufen. Tatsächlich gibt es keine der Optionen, die ich für das Rendern der benutzerdefinierten Signin-Schaltfläche angegeben habe (d. H. Die quadratische Form und das dunkle Thema), daher rate ich aufgrund der <div> -Klasse eine Standardschaltfläche.

Ich lade gerade die Bibliothek synchron, weil gapi sonst nicht im Bereich ist, wenn componentDidMount ausgelöst wird.

Die andere Option, die ich sehe, wäre googles Empfehlung, <script src="https://apis.google.com/js/platform.js?onload=renderButton" async defer></script> zu verwenden und mein Rendering in eine Funktion einzufügen. Aber dann muss entweder dieses Skript in die Komponente geladen werden, oder ich muss einen Weg finden, dass diese Funktion als Callback in index.html übergeben wird, von denen keine wie eine gute Lösung aussieht.

>

Wie kann ich die benutzerdefinierte Login-Schaltfläche anstelle der Standard-Schaltfläche anzeigen lassen?

    
amn41 26.07.2015, 18:03
quelle

2 Antworten

12

Dieser Hack macht den Trick für jetzt ...

In meinem index.html trigger ich ein benutzerdefiniertes Ereignis beim Laden der Bibliothek:

%Vor%

und meine Reaktionskomponente sieht jetzt so aus:

%Vor%

Beachten Sie, dass das gerenderte <div> "my-signin2" als id nicht als class hat.

    
amn41 27.07.2015 17:45
quelle
4

Ich habe JQuery verwendet, um das Skript über die Methode componentDidMount zu laden ...

%Vor%

Wie in f13ts gesagt, sollte das gerenderte <div> "my-signin2" als ID haben, im Gegensatz zu einer Klasse.

    
Daniel 23.02.2016 12:12
quelle

Tags und Links