React表单开发：自定义导出参数唯一标识与校验模式配置

嘿，我明白你现在的困扰——所有表单都共用同一个syncValidationForm标识，而且校验规则也没法灵活调整对吧？其实reduxForm本身就支持动态配置这些参数，咱们稍微改改代码就能完全掌握控制权了。

核心思路：把静态配置改成动态函数 #

原来你是直接给reduxForm传了一个静态对象，现在咱们把它改成返回配置对象的函数，这个函数能拿到组件传入的props，这样就能动态读取自定义的表单标识、校验函数这些参数了。

修改后的完整代码 #

import React from 'react';
import { reduxForm } from 'redux-form';
import FieldMaker from './FieldMaker';
import ButtonMaker from './ButtonMaker';

const FormShell = props => {
  const { handleSubmit, pristine, reset, submitting } = props
  return (
    <form onSubmit={handleSubmit}>
      <FieldMaker fields={props.fields} />
      <ButtonMaker buttons={props.buttons} pristine={pristine} submitting={submitting} reset={reset} />
    </form>
  )
}

// 这里把配置改成函数，接收props动态生成配置
export default reduxForm((props) => ({
  // 使用props传入的formName，没传的话用默认值避免冲突
  form: props.formName || 'defaultForm',
  // 动态接收校验函数
  validate: props.validate,
  // 动态接收警告函数
  warn: props.warn
}))(FormShell)

怎么用这个可配置的表单组件？ #

现在你可以给不同的表单实例传入专属的标识和校验规则了，比如：

// 导入不同场景的校验/警告函数
import loginValidate from './loginValidate';
import loginWarn from './loginWarn';
import signupValidate from './signupValidate';

// 登录表单
<FormShell
  formName="userLoginForm"
  validate={loginValidate}
  warn={loginWarn}
  fields={loginFieldConfig}
  buttons={loginButtonConfig}
/>

// 注册表单
<FormShell
  formName="userSignupForm"
  validate={signupValidate}
  fields={signupFieldConfig}
  buttons={signupButtonConfig}
/>

额外小提示 #

• 如果某个表单不需要校验或者警告，直接不传对应的validate/warn props就行，reduxForm会自动忽略它们；
• 给formName加个默认值是个好习惯，避免忘记传参时多个表单共用同一个标识导致混乱；
• 这样改造后，你的FormShell就变成了一个真正通用的表单容器，不管是同步校验、异步校验还是不同业务规则的表单，都能轻松适配。

内容的提问来源于stack exchange，提问作者The Old County