React自定义Google登录按钮：<a>标签触发登录弹窗问题

你当前的写法存在核心问题：在原生HTML的<a>标签里直接调用React组件GoogleLoginButton是行不通的——React组件不是全局可调用的函数，这种混合原生HTML和React组件的方式不符合React的组件化开发逻辑。

正确的做法是在React组件内部自定义登录触发元素（比如你想要的<a>标签），通过@react-oauth/google提供的useGoogleLogin钩子手动触发登录流程，具体步骤如下：

1. 修改GoogleLoginButton组件，使用自定义标签 #

替换原来依赖默认GoogleLogin组件的写法，改用useGoogleLogin钩子实现手动触发：

import React from 'react'
import { useGoogleLogin } from '@react-oauth/google'
import { GoogleOAuthProvider } from '@react-oauth/google'

function GoogleLoginButton() {
    const clientId = "你的Client ID";

    // 使用useGoogleLogin钩子创建登录触发函数
    const login = useGoogleLogin({
        onSuccess: (res) => {
            console.log(res);
            // 这里可以处理登录成功后的逻辑，比如获取用户信息、跳转页面等
        },
        onError: (err) => {
            console.log(err);
        },
    });

    return (
        <GoogleOAuthProvider clientId={clientId}>
            {/* 自定义的<a>标签，点击时调用login函数 */}
            <a href="#" className="social" onClick={(e) => {
                e.preventDefault(); // 阻止<a>标签默认的跳转行为
                login(); // 触发Google登录
            }}>
                <i className="fa fa-google"></i>
            </a>
        </GoogleOAuthProvider>
    )
}

export default GoogleLoginButton;

2. 在你的React应用中正确引入该组件 #

确保你是在React的根组件（比如App.js）里引入并渲染GoogleLoginButton，而不是在index.html里直接通过<script>引入。例如：

// App.js
import React from 'react';
import GoogleLoginButton from './GoogleLoginButton';

function App() {
    return (
        <div className="App">
            {/* 渲染自定义的Google登录按钮 */}
            <GoogleLoginButton />
        </div>
    );
}

export default App;

3. 移除index.html中的无效代码 #

删掉index.html里的以下内容，因为React项目的入口是通过ReactDOM.render（或createRoot）挂载的，不需要在原生HTML里写登录按钮和脚本引入：

<a href="#" class="social" onclick="GoogleLoginButton"><i class="fa fa-google"></i></a>
...
<script src="../src/GoogleLoginButton.js"></script>

关键说明 #

• useGoogleLogin钩子是@react-oauth/google提供的手动触发登录的API，完美适配自定义UI的需求
• 点击自定义<a>标签时，必须调用e.preventDefault()阻止默认的锚点跳转行为，避免页面滚动或刷新
• 所有的登录逻辑都封装在React组件内部，符合React的开发模式，避免了原生HTML和React组件的冲突

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