Блог

Я следую https://developers.google.com/identity/gsi/web/guides/display-button#javascript чтобы добавить вход Google в мое приложение ReactJS.

Я добавил

  <script>
      function handleCredentialResponse(response) {
        console.log("Encoded JWT ID token: "   response.credential);
      }

      window.onload = function () {
        google.accounts.id.initialize({
          client_id: "YOUR_GOOGLE_CLIENT_ID",
          callback: handleCredentialResponse,
        });
        google.accounts.id.renderButton(
          document.getElementById("buttonDiv"),
          { theme: "filled_blue", size: "large", shape: "pill" } // customization attributes
        );
        google.accounts.id.prompt(); // also display the One Tap dialog
      };
</script>
 

в index.html и в моем компоненте у меня есть <div id="buttonDiv"></div> .

Однако именно это происходит, когда я перезагружаю страницу:

Начальная кнопка загружена правильно, но каким — то образом изменяется размер. Я приостановил выполнение JS в отладчике и обнаружил, что начальная кнопка была чисто div s, но после изменения размера она использовала iframe вместо этого.