React集成reCAPTCHA传sitekey仍报错：grecaptcha.render提示参数缺失

Ah, I’ve run into this exact issue before! That "Missing required parameters: sitekey" error is so frustrating when you swear you’ve passed the sitekey correctly. Let’s break down the most likely causes and fixes:

1. You mixed up callback names (super common!) #

Looking at your code snippet, you’re assigning window[this.callbackName] = this.props.callback—but if you’re using that callback in the onload parameter of the reCAPTCHA script, that’s the problem.

The onload callback should handle initializing reCAPTCHA once the script loads, not the captcha verification success. You need two separate callbacks:

• One for script load completion
• One for when the user finishes the captcha

Here’s the corrected approach:

class ReCaptcha extends React.Component {
  componentDidMount() {
    // Callback for reCAPTCHA script initialization
    this.initCallback = 'recaptchaInit';
    window[this.initCallback] = () => this.renderRecaptcha();

    // Callback for captcha verification success
    this.verifyCallback = 'recaptchaVerify';
    window[this.verifyCallback] = this.props.callback;

    if (window.grecaptcha) {
      this.renderRecaptcha();
    } else {
      this.loadRecaptchaScript();
    }
  }

  loadRecaptchaScript() {
    const script = document.createElement('script');
    // Use the INIT callback in onload, set render=explicit for manual rendering
    script.src = `https://www.google.com/recaptcha/api.js?onload=${this.initCallback}&render=explicit`;
    script.async = true;
    script.defer = true;
    document.body.appendChild(script);
  }

  renderRecaptcha() {
    // First, double-check the sitekey exists
    if (!this.props.sitekey) {
      console.error('Sitekey is missing from props!');
      return;
    }

    const container = document.getElementById('recaptcha-container');
    if (container) {
      grecaptcha.render(container, {
        sitekey: this.props.sitekey, // Ensure this is lowercase (not siteKey!)
        callback: window[this.verifyCallback]
      });
    }
  }

  render() {
    return <div id="recaptcha-container"></div>;
  }
}

2. Sitekey spelling or prop timing issues #

• Check case sensitivity: reCAPTCHA’s render parameter is lowercase sitekey, not camelCase siteKey. A tiny typo here will trigger the error instantly.
• Verify prop availability: If your sitekey is loaded asynchronously (e.g., from an API call), it might not be ready in componentDidMount. Add a check in componentDidUpdate to render once the sitekey arrives:

componentDidUpdate(prevProps) {
  if (prevProps.sitekey !== this.props.sitekey && this.props.sitekey && window.grecaptcha) {
    this.renderRecaptcha();
  }
}

3. Container element doesn’t exist yet #

Make sure the DOM container for reCAPTCHA is mounted before calling grecaptcha.render. Using a React ref instead of getElementById is more reliable:

class ReCaptcha extends React.Component {
  constructor(props) {
    super(props);
    this.recaptchaRef = React.createRef();
  }

  renderRecaptcha() {
    if (this.recaptchaRef.current && this.props.sitekey) {
      grecaptcha.render(this.recaptchaRef.current, {
        sitekey: this.props.sitekey,
        callback: window[this.verifyCallback]
      });
    }
  }

  render() {
    return <div ref={this.recaptchaRef}></div>;
  }
}

Start with checking the callback mix-up first—that’s the most frequent culprit. Then verify your sitekey is actually present when render is called, and that your container is ready.

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