在 React 错误中实现 Google 登录 - <div> 标签上的 prop `data-callback` 的值无效

Posted 2023-02-23

【中文标题】在 React 错误中实现 Google 登录 - <div> 标签上的 prop `data-callback` 的值无效

【英文标题】：Implementing Google sign-in in React error - Invalid value for prop `data-callback` on <div> tag

【发布时间】：2021-08-09 23:21:31

【问题描述】：

我正在尝试在 React 中实现 google 登录。这是我的组件 -

import  Fragment, useEffect  from "react";
import  GOOGLE_CLIENT_ID  from "./some-file";

const GoogleSignIn = () =>  

  const googleSignInHandler = response => 
    console.log(response);
  

  const initGsi = () =>  
    if(window.google)  
        window.google.accounts.id.initialize(
            client_id: GOOGLE_CLIENT_ID,
            callback: googleSignInHandler
        );
    
  

  useEffect(() => 
   initGsi();
  , []);

  return (
    <Fragment>
      <div
        id="g_id_onload"
        data-client_id=GOOGLE_CLIENT_ID
        data-context="use"
        data-ux_mode="popup"
        data-auto_prompt="false"
      ></div>

      <div
        className=['g_id_signin', 'gsignin'].join(' ')
        data-type="standard"
        data-shape="rectangular"
        data-theme="filled_blue"
        data-text="continue_with"
        data-callback=googleSignInHandler
        data-size="large"
        data-logo_alignment="left"
      ></div>
    </Fragment>
  );
;

export default GoogleSignIn;
`

如果我设置data-auto_prompt="true" 即一键式，显然它可以工作。但是，我不知道如何使它适用于按钮单击。我真的不想使用 npm 包，此外它们也基于旧版 Google 登录。有什么办法吗？

【问题讨论】：

找到解决方案了吗？

您不能将回调放在数据属性中并希望获得对 DOM 的有效函数引用。请参阅这篇关于how React treats attributes that end up in the DOM 的帖子向下滚动到具有函数值的非事件属性。

【参考方案1】：

我花了我一个晚上的时间来寻找谷歌一键式的解决方法，我的方法可能对你有用。主要问题：'react 将data-*** 属性作为字符串传递'，这就是我们面临这些问题的原因。

最简单的方法是创建类组件：

在下面的示例中，我创建了全局函数（customCallback）并将其与回调（data-callback=customCallback）绑定，谷歌正在等待。

export class OneTapV2 extends React.Component 
  constructor(props) 
    super(props)
    window.customCallback = this.customCallback
  

  customCallback(e) 
    console.log('ONE TAP version 2 ', e)
  

  render() 
    return (
      <div
        id='g_id_onload'
        data-client_id='GOOGLE_ID'
        data-callback='customCallback'
      />
    )
  

此案例适用于其他无法使用 oneTap OAuth 进行管理的人。小伙伴们请看https://developers.google.com/identity/gsi/web/guides/use-one-tap-js-api；他们描述了如何通过 JS 打开 oneTap 窗口

【讨论】：

你是对的。只是为了确保我找到了这篇关于 how React treats attributes that end up in the DOM 的帖子，向下滚动到 具有函数值的非事件属性。