如何将ReactJS中含Firebase验证码功能的类组件转为使用Hooks的函数组件

转换后完整代码 #

import React, { useState } from 'react';
import firebase from 'firebase/app';
import 'firebase/auth';

const App = () => {
  // 替代类组件state存储表单数据
  const [formData, setFormData] = useState({
    mobile: ''
    // 其他表单字段可直接在此扩展
  });

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData(prev => ({
      ...prev,
      [name]: value
    }));
  };

  const configureCaptcha = () => {
    window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('sign-in-button', {
      'size': 'invisible',
      'callback': (response) => {
        onSignInSubmit();
        console.log("Recaptca varified");
      },
      defaultCountry: "IN"
    });
  };

  const onSignInSubmit = (e) => {
    e.preventDefault();
    configureCaptcha();
    const phoneNumber = "+91" + formData.mobile;
    console.log(phoneNumber);
    const appVerifier = window.recaptchaVerifier;
    firebase.auth().signInWithPhoneNumber(phoneNumber, appVerifier)
      .then((confirmationResult) => {
        window.confirmationResult = confirmationResult;
        console.log("OTP has been sent");
      }).catch((error) => {
        console.log("SMS not sent", error);
      });
  };

  return (
    // 此处直接复用原类组件render中的JSX代码即可
    // 注意将原`this.state.xxx`替换为`formData.xxx`，提交按钮id保持为`sign-in-button`
    .....
  );
};

export default App;

转换核心要点 #

• 用useState Hook替代类组件的this.state和this.setState，保留了通用表单处理逻辑，后续新增表单字段无需修改handleChange代码
• 移除所有this引用：类组件的自定义方法在函数组件中直接声明为普通函数，调用时直接使用函数名即可
• 核心业务逻辑完全复用，验证码配置、短信发送的逻辑和原类组件保持一致
• 渲染层JSX代码可直接复用原类组件render的内容，仅需要修改state取值方式即可

原组件运行效果 #

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