如何将React类组件中的代码段重构适配为函数组件写法？

你原有类组件的代码是从实例props中解构formApi和name字段，转函数组件仅需调整props的获取方式即可，原有逻辑可完全保留，不需要做其他改动。

• 写法1：validate方法单独定义，props作为参数传入
  适用于validate抽离在组件外部的场景：

const validate = (value, props) => {
  const {
    formApi: { getValue },
    name,
  } = props;
  // 此处直接照搬你原来的后续验证逻辑即可
};

• 写法2：在组件内部定义validate，直接闭包访问props
  适用于validate写在组件内部的场景：

// 普通props写法
function YourComponent(props) {
  const validate = value => {
    const {
      formApi: { getValue },
      name,
    } = props;
    // 原有验证逻辑直接照搬即可
  };

  // 组件其他业务逻辑
}

// 如果你的组件入参已经做了解构，可以简化为：
function YourComponent({ formApi: { getValue }, name }) {
  const validate = value => {
    // 这里直接用已经解构好的getValue、name变量即可
    // 原有验证逻辑直接照搬即可
  };

  // 组件其他业务逻辑
}

注意：函数组件不需要像类组件一样处理this指向问题，validate方法直接传给表单对应的验证属性即可正常运行。

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