如何将使用Formik默认Hooks的React函数式组件转换为类组件

核心改造逻辑 #

• 原函数组件的useState状态全部迁移到类组件的this.state中，状态更新操作统一使用this.setState实现
• 类组件无法直接调用Formik的useFormikContext钩子，改用Formik官方提供的withFormik高阶组件包裹目标组件，将Formik上下文对象注入到组件props中，功能和useFormikContext完全一致
• 多Props解构、剩余参数透传逻辑直接从this.props中提取即可，和函数组件用法无差异

改造后完整代码示例 #

import React, { Component } from 'react';
import { withFormik } from 'formik';

class BanksList extends Component {
  constructor(props) {
    super(props);
    // 替换原3个useState声明
    this.state = {
      open: false,
      value: null,
      listofBanks: []
    };
  }

  render() {
    // 解构自定义传入的Props
    const { name, childToParentBC, bankResolve, ...otherProps } = this.props;
    // 解构Formik注入的上下文属性，对应原useFormikContext返回值
    const { setFieldTouched, setFieldValue, errors, touched, values } = this.props.formik;

    // 此处保留原有业务逻辑即可，状态更新调用this.setState
    // 示例：修改open状态：this.setState({ open: true })
    // 示例：修改银行列表：this.setState({ listofBanks: 新的列表数据 })

    return (
      // 原有组件渲染逻辑，otherProps可直接透传给内部元素
      <></>
    );
  }
}

// 使用withFormik高阶组件包裹后导出
export default withFormik()(BanksList);

注意事项 #

• 所有Formik相关的方法、校验属性都从this.props.formik中获取，和原useFormikContext返回的内容完全一致，原有调用逻辑无需修改
• 剩余参数...otherProps的透传逻辑和函数组件用法一致，直接传递给内部子元素即可
• 原有状态读取直接从this.state中取值即可，例如原open变量替换为this.state.open

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