ReactJS集成Google登录后按钮加载完成后尺寸异常变化如何解决

问题根因 #

你遇到的按钮尺寸跳变是初始化时机和React渲染周期不匹配导致的：
window.onload的触发时机早于React组件的挂载完成时机，GSI初始化时检测不到稳定存在的buttonDiv容器，会先渲染临时div结构的按钮，等React组件挂载完成、容器稳定后，GSI会二次渲染将按钮替换为iframe结构，两次渲染的样式适配异常导致尺寸变化。

解决方案 #

1. 清理index.html中的原有逻辑
   删除你之前加在index.html<script>标签内的window.onload相关初始化代码，仅保留Google身份服务SDK的引入即可。

2. 将按钮渲染逻辑迁移到React组件的useEffect钩子中
   在按钮所在的React组件内，通过useEffect确保组件挂载完成、buttonDiv容器存在后再执行GSI的初始化和按钮渲染逻辑，示例代码如下：

import { useEffect } from 'react';

const LoginComponent = () => {
  // 凭证回调处理逻辑
  const handleCredentialResponse = (response) => {
    console.log("Encoded JWT ID token: " + response.credential);
    // 此处补充后续登录校验逻辑
  };

  useEffect(() => {
    // 确保SDK加载完成、全局google对象可用
    if (!window.google) return;

    window.google.accounts.id.initialize({
      client_id: "替换为你的实际Google客户端ID",
      callback: handleCredentialResponse,
    });

    const buttonContainer = document.getElementById("buttonDiv");
    if (buttonContainer) {
      window.google.accounts.id.renderButton(
        buttonContainer,
        { theme: "filled_blue", size: "large", shape: "pill" }
      );
      // 不需要One Tap弹窗可注释下一行
      window.google.accounts.id.prompt();
    }
  }, []); // 空依赖数组保证仅在组件首次挂载时执行一次

  return (
    <div>
      {/* 给容器加固定宽高，彻底避免渲染切换时的布局跳动 */}
      <div id="buttonDiv" style={{ width: 240, height: 40 }} />
    </div>
  );
};

export default LoginComponent;

3. 额外注意事项

• 不要将buttonDiv容器放在条件渲染分支中，避免容器被React销毁后触发GSI重复渲染
• 如果你的项目用了React.StrictMode，开发环境下useEffect会执行两次，可通过加状态标记避免重复初始化

内容的提问来源于stack exchange，提问作者clueless waffle