React类组件中react-google-recaptcha偶发不显示问题求助

问题分析 #

你遇到的两个问题本质是Google reCAPTCHA脚本与React组件生命周期不同步导致的：

• 刷新时偶尔不显示：脚本加载完成前组件已挂载，初始化流程触发失败
• 路由往返后完全不显示：组件卸载时reCAPTCHA的DOM节点未被正确清理，再次挂载时脚本无法重新初始化

解决方案 #

1. 给ReCAPTCHA组件添加Ref，手动控制初始化与重置 #

通过ref获取reCAPTCHA实例，在组件挂载/更新阶段手动触发渲染或重置，确保脚本与组件状态同步。

修改后的组件核心代码：

class ConfessionForm extends React.Component {
  constructor(props) {
    super(props);
    this.recaptchaRef = React.createRef();
    // 原有state初始化逻辑保持不变
    this.state = {
      selectOptionActive: false,
      optionSelected: ''
    };
  }

  componentDidMount() {
    // 组件挂载后强制触发reCAPTCHA重置，确保初始化
    if (this.recaptchaRef.current) {
      this.recaptchaRef.current.reset();
    }
  }

  componentDidUpdate(prevProps) {
    // 路由切换返回时，重新初始化reCAPTCHA
    if (this.recaptchaRef.current && prevProps.location?.pathname !== this.props.location?.pathname) {
      this.recaptchaRef.current.reset();
    }
  }

  // 原有selectOption、handleSubmit等方法保持不变

  render() {
    return (
      <form className='confession-form' onSubmit={this.handleSubmit}>
        {/* 原有表单选择器、文本域代码保持不变 */}
        
        <ReCAPTCHA 
          ref={this.recaptchaRef}
          className="recaptcha" 
          sitekey={process.env.REACT_APP_SITE_KEY} 
          size="normal" 
        />
        
        <button className='btn-confess'>Confess</button>
      </form>
    )
  }
}

2. 给路由组件添加唯一Key，强制重新挂载 #

路由往返时，给表单路由组件添加基于路径或时间戳的key，让React完全重建组件实例，避免复用残留的旧DOM节点导致初始化失败。

路由配置示例：

<Route 
  path="/confession" 
  key={window.location.pathname + Date.now()}
  component={ConfessionForm} 
/>

或者在表单组件内部给外层容器加key：

// ConfessionForm的render方法中
<div key={this.props.location.pathname}>
  {/* 原有表单内容 */}
</div>

3. 手动控制Google reCAPTCHA脚本加载，避免重复冲突 #

如果自动加载脚本不稳定，可手动在组件中控制脚本加载时机，确保脚本就绪后再渲染ReCAPTCHA。

添加脚本加载逻辑的组件代码：

class ConfessionForm extends React.Component {
  constructor(props) {
    super(props);
    this.recaptchaRef = React.createRef();
    this.state = {
      selectOptionActive: false,
      optionSelected: '',
      recaptchaLoaded: false // 标记脚本是否加载完成
    };
  }

  componentDidMount() {
    const existingScript = document.querySelector('script[src="https://www.google.com/recaptcha/api.js"]');
    if (!existingScript) {
      const script = document.createElement('script');
      script.src = 'https://www.google.com/recaptcha/api.js';
      script.async = true;
      script.defer = true;
      script.onload = () => {
        this.setState({ recaptchaLoaded: true });
        this.recaptchaRef.current?.reset();
      };
      document.body.appendChild(script);
    } else {
      this.setState({ recaptchaLoaded: true });
      this.recaptchaRef.current?.reset();
    }
  }

  render() {
    return (
      <form className='confession-form' onSubmit={this.handleSubmit}>
        {/* 原有表单选择器、文本域代码保持不变 */}
        
        {/* 脚本加载完成后才渲染ReCAPTCHA */}
        {this.state.recaptchaLoaded && (
          <ReCAPTCHA 
            ref={this.recaptchaRef}
            className="recaptcha" 
            sitekey={process.env.REACT_APP_SITE_KEY} 
            size="normal" 
          />
        )}
        
        <button className='btn-confess'>Confess</button>
      </form>
    )
  }
}

关键原理说明 #

• Ref控制实例：react-google-recaptcha的reset()方法可强制重新渲染验证码，解决初始化时机不匹配的问题
• 强制组件重建：通过key属性让React销毁旧组件实例、创建新实例，彻底清除残留的DOM节点
• 手动脚本加载：确保脚本加载完成后再渲染组件，避免组件挂载时脚本未就绪导致的初始化失败

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