如何将这段jQuery代码转换为React函数组件、类组件或Hooks

下面提供两种React实现方式，完全对应原jQuery代码的逻辑：DOM加载完成后延迟500ms检查目标DIV是否为空，为空则渲染reCAPTCHA。

函数组件（React Hooks 实现） #

使用useEffect模拟DOM加载完成时机，useRef获取目标DOM节点，同时添加定时器清理逻辑避免内存泄漏：

import { useEffect, useRef } from 'react';

const RecaptchaLoader = () => {
  const targetDivRef = useRef(null);

  useEffect(() => {
    const checkAndRender = setTimeout(() => {
      // 确认目标DOM存在且无子元素
      if (targetDivRef.current && targetDivRef.current.children.length === 0) {
        // 确保reCAPTCHA脚本已加载
        if (window.grecaptcha) {
          window.grecaptcha.render(targetDivRef.current, {
            sitekey: 'YOUR_SITE_KEY',
            callback: recaptchaCallback
          });
        }
      }
    }, 500);

    // 组件卸载时清理定时器
    return () => clearTimeout(checkAndRender);
  }, []);

  // 自定义reCAPTCHA回调函数
  const recaptchaCallback = (response) => {
    // 这里添加验证成功后的业务逻辑
    console.log('reCAPTCHA验证通过，响应值:', response);
  };

  return <div ref={targetDivRef} id="DIV_ID"></div>;
};

export default RecaptchaLoader;

类组件实现 #

基于React生命周期方法实现，逻辑和函数组件一致：

import React, { Component } from 'react';

class RecaptchaLoader extends Component {
  constructor(props) {
    super(props);
    this.targetDivRef = React.createRef();
    this.checkTimer = null;
  }

  componentDidMount() {
    this.checkTimer = setTimeout(() => {
      if (this.targetDivRef.current && this.targetDivRef.current.children.length === 0) {
        if (window.grecaptcha) {
          window.grecaptcha.render(this.targetDivRef.current, {
            sitekey: 'YOUR_SITE_KEY',
            callback: this.recaptchaCallback
          });
        }
      }
    }, 500);
  }

  componentWillUnmount() {
    // 清理定时器防止内存泄漏
    if (this.checkTimer) {
      clearTimeout(this.checkTimer);
    }
  }

  // 类组件的回调函数（箭头函数绑定this）
  recaptchaCallback = (response) => {
    console.log('reCAPTCHA验证通过，响应值:', response);
    // 添加业务逻辑
  };

  render() {
    return <div ref={this.targetDivRef} id="DIV_ID"></div>;
  }
}

export default RecaptchaLoader;

关键说明 #

• 用React的ref替代jQuery的ID选择器，更符合React的DOM操作规范
• 增加了window.grecaptcha存在性检查，避免因reCAPTCHA脚本加载延迟导致的报错
• 添加了定时器清理逻辑，防止组件卸载后残留定时器引发内存泄漏

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