React集成Google登录时给data-callback赋值函数告警且回调不触发

• HTML的data-*自定义属性本身仅支持存储字符串、数字、布尔这类基础类型值，React处理标签属性时也遵循该规则，非基础类型的属性值会被直接过滤，不会渲染到真实DOM上。你直接给data-callback传入函数引用，Google的SDK无法从DOM上读取到该配置，回调自然不会触发，同时React就会抛出你看到的告警。
• 另外Google一键登录SDK本身的设计就是仅支持从data-callback属性读取全局函数的名称字符串，再到window全局对象下调用对应函数，不支持直接传入函数引用。

1. 把data-callback的属性值改成全局函数名的字符串，比如handleGoogleCredentialResponse
2. 在组件挂载的componentDidMount生命周期里，把你的回调方法挂载到window对象上
3. 组件卸载的时候删除window上挂载的这个函数，避免内存泄漏

额外提醒：你原代码里回调中读取的字段名写错了，Google返回的凭证字段是credential不是credentials，否则就算回调触发也无法正常读取返回值。

修改后的完整代码 #

class Login extends React.Component{

  handleCredentialResponse = (response)=>{
    console.log(response.credential);
  }

  componentDidMount() {
    // 将回调挂载到全局window对象供Google SDK调用
    window.handleGoogleCredentialResponse = this.handleCredentialResponse;
  }

  componentWillUnmount() {
    // 组件卸载时清理全局挂载的函数，避免内存泄漏
    delete window.handleGoogleCredentialResponse;
  }

  render(){
    return (
      <div className="login">
        <div className="text-center mb-2">
          <img src="http://placehold.it/60" alt="Sign in"/>
          </div>
        <form>
          <div className="text-center h3 mb-3">Sign in</div>
          <div className="mb-3">
            <label className="form-label">Email address</label>
            <input type="email" className="form-control" />
          </div>
          <div className="mb-3">
            <label className="form-label">Password</label>
            <input type="password" className="form-control"/>
          </div>
          <div className="text-center mb-3">
            <button type="submit" className="btn btn-primary">Sign in</button>
          </div>
        </form>
        <div className="mb-3 text-center form-text div_or">Or</div>
        <div className="google_signin_row">
          <div className="google_signin_col">
            <div id="g_id_onload"
              data-client_id="CLIENT_ID"
              data-callback="handleGoogleCredentialResponse">
            </div>
            <div className="g_id_signin" data-type="standard" data-theme="filled_blue" data-width="250"></div>
          </div>
        </div>
      </div>
    );
  }
}

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