时间戳

首页 > 解决方案 > 警告：道具“数据回调”的值无效

标签。从元素中删除它，或者传递一个字符串或数字值以将其保留在 DOM 中

javascript - 警告：道具“数据回调”的值无效
标签。从元素中删除它，或者传递一个字符串或数字值以将其保留在 DOM 中

问题描述

在倒数第二个 div 标记中，id = "g_id_onload"如果我将函数分配给属性data-callback，react 会发出警告：

data-callback警告： div 标签上的 prop 值无效。从元素中删除它，或者传递一个字符串或数字值以将其保留在 DOM 中

也data-callback永远不会被调用。有谁知道这有什么问题。

class Login extends React.Component{

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


  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={(res)=>this.handleCredentialResponse(res)}>
            </div>
            <div className="g_id_signin" data-type="standard" data-theme="filled_blue" data-width="250"></div>
          </div>
        </div>
      </div>
    );
  }
}

标签： javascriptreactjsgoogle-signin

解决方案

在这里找到解决方案：https ://github.com/google/recaptcha/issues/74

概括：

data-callback 属性需要一个字符串，该字符串定义应触发的全局命名空间中的函数名称。您不能在属性中定义函数。

所以在全局命名空间中定义函数handleCredentialResponse并放置data-callback = "handleCredentialResponse"工作。

替代方式：

class Login extends React.Component{
    constructor(props) {
        super(props);
        window.handleCredentialResponse = this.handleCredentialResponse;
    }

    handleCredentialResponse(response){
        console.log(response);
    }

    render(){
        return <div className="g_id_onload" 
            data-callback="handleCredentialResponse" 
            />
    }
}

推荐阅读