如何实现可在Formik的Field和FastField间切换的通用包装组件

现有代码问题 #

你写的ComplexField未生效的核心原因有两个：

• 透传属性错误：你在Field/FastField上声明的props={props}不会被Formik识别，剩余属性需要直接展开到组件上
• 回调参数冗余：调用children时不需要额外传入props，Formik的render函数默认返回field/meta/form三个参数，你额外传入的props会和原生返回值冲突

正确实现代码 #

ComplexField组件实现 #

import { Field, FastField } from 'formik';

const ComplexField = ({ name, children, isDynamic, ...restProps }) => {
  // 动态选择使用的字段组件
  const FieldComponent = isDynamic ? Field : FastField;
  return (
    <FieldComponent name={name} {...restProps}>
      {/* 直接透传Formik原生返回的回调参数 */}
      {(renderProps) => children(renderProps)}
    </FieldComponent>
  );
};

FormikControl使用方式 #

你原有的FormikControl调用逻辑不需要修改，即可正常切换两种组件：

• 当isDynamic={true}时使用Formik原生Field，会随Formik全量状态更新重渲染，适合表单项依赖其他字段值的场景
• 当isDynamic={false}时使用FastField，仅在当前字段的value/error/touched变化时重渲染，适合独立的表单项，可以提升表单渲染性能

所有Field/FastField原生支持的属性（比如validate、className等）都可以直接透传使用，无需额外适配。

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