如何实现适配多类人员数据的通用创建/编辑弹窗

下面是3种生产环境常用的实现方案，可根据业务的扩展需求选择：

方案1：判别联合类型 + 泛型组件内置分支渲染 #

适合人员类型少、后续扩展频率低的场景，逻辑集中维护成本低。
核心思路是给Person接口加显式的类型标记，用可辨识联合类型+类型守卫做类型收窄，在组件内部分支渲染特有字段。

// 先改造类型为可辨识联合
type PersonType = 'client' | 'specialist'
interface Person {
  firstName: string;
  lastName: string;
  dateOfBirth: Date;
  type: PersonType; // 新增显式类型标记，避免字段重名导致的判断错误
}
interface Client extends Person {
  type: 'client';
  diagnose: string;
}
interface Specialist extends Person {
  type: 'specialist';
  isAvailable: boolean;
  speciality: string;
}

// 类型守卫用于TS类型收窄
function isClient(person: Person): person is Client {
  return person.type === 'client';
}
function isSpecialist(person: Person): person is Specialist {
  return person.type === 'specialist';
}

泛型组件实现（以React为例）：

// 泛型Props定义
interface PersonFormModalProps<T extends Person> {
  visible: boolean;
  initialValue?: T;
  onSubmit: (value: T) => void;
  onCancel: () => void;
}

const PersonFormModal = <T extends Person>(props: PersonFormModalProps<T>) => {
  const { visible, initialValue, onSubmit, onCancel } = props;
  const [formValue, setFormValue] = useState<Person>(initialValue ?? {
    firstName: '',
    lastName: '',
    dateOfBirth: new Date(),
    type: 'client' // 新增场景可由父组件传入指定类型
  })

  const handleSubmit = () => {
    onSubmit(formValue as T);
  }

  return (
    <Modal visible={visible} onCancel={onCancel} onOk={handleSubmit}>
      {/* 公共字段统一渲染 */}
      <FormItem label="名">
        <Input value={formValue.firstName} onChange={e => setFormValue({...formValue, firstName: e.target.value})} />
      </FormItem>
      <FormItem label="姓">
        <Input value={formValue.lastName} onChange={e => setFormValue({...formValue, lastName: e.target.value})} />
      </FormItem>
      <FormItem label="出生日期">
        <DatePicker value={formValue.dateOfBirth} onChange={date => setFormValue({...formValue, dateOfBirth: date})} />
      </FormItem>

      {/* 特有字段按类型分支渲染 */}
      {isClient(formValue) && (
        <FormItem label="诊断信息">
          <Input.TextArea value={formValue.diagnose} onChange={e => setFormValue({...formValue, diagnose: e.target.value})} />
        </FormItem>
      )}
      {isSpecialist(formValue) && (
        <>
          <FormItem label="是否在岗">
            <Switch checked={formValue.isAvailable} onChange={checked => setFormValue({...formValue, isAvailable: checked})} />
          </FormItem>
          <FormItem label="专长">
            <Input value={formValue.speciality} onChange={e => setFormValue({...formValue, speciality: e.target.value})} />
          </FormItem>
        </>
      )}
    </Modal>
  )
}

方案2：配置化表单驱动 #

适合人员类型多、后续需要频繁扩展的场景，新增类型不需要修改弹窗组件本身，只需新增配置即可。
核心思路是把每个字段的标签、渲染逻辑、校验规则提前配置，通用弹窗只负责按配置渲染表单项。

// 字段配置定义
interface FieldConfig {
  label: string;
  field: string;
  render: (value: any, onChange: (val: any) => void) => React.ReactNode;
}
// 不同人员类型的表单配置
const personFormConfig: Record<PersonType, FieldConfig[]> = {
  client: [
    { label: '名', field: 'firstName', render: (val, onChange) => <Input value={val} onChange={e => onChange(e.target.value)} /> },
    { label: '姓', field: 'lastName', render: (val, onChange) => <Input value={val} onChange={e => onChange(e.target.value)} /> },
    { label: '出生日期', field: 'dateOfBirth', render: (val, onChange) => <DatePicker value={val} onChange={onChange} /> },
    { label: '诊断信息', field: 'diagnose', render: (val, onChange) => <Input.TextArea value={val} onChange={e => onChange(e.target.value)} /> },
  ],
  specialist: [
    { label: '名', field: 'firstName', render: (val, onChange) => <Input value={val} onChange={e => onChange(e.target.value)} /> },
    { label: '姓', field: 'lastName', render: (val, onChange) => <Input value={val} onChange={e => onChange(e.target.value)} /> },
    { label: '出生日期', field: 'dateOfBirth', render: (val, onChange) => <DatePicker value={val} onChange={onChange} /> },
    { label: '是否在岗', field: 'isAvailable', render: (val, onChange) => <Switch checked={val} onChange={onChange} /> },
    { label: '专长', field: 'speciality', render: (val, onChange) => <Input value={val} onChange={e => onChange(e.target.value)} /> },
  ]
}

弹窗组件实现：

interface PersonFormModalProps {
  visible: boolean;
  personType: PersonType;
  initialValue?: any;
  onSubmit: (value: any) => void;
  onCancel: () => void;
}
const PersonFormModal = (props: PersonFormModalProps) => {
  const { visible, personType, initialValue, onSubmit, onCancel } = props;
  const [formValue, setFormValue] = useState(initialValue ?? {});
  const fields = personFormConfig[personType];

  const handleSubmit = () => {
    onSubmit(formValue);
  }

  return (
    <Modal visible={visible} onCancel={onCancel} onOk={handleSubmit}>
      {fields.map(field => (
        <FormItem label={field.label} key={field.field}>
          {field.render(formValue[field.field], (val) => setFormValue({...formValue, [field.field]: val}))}
        </FormItem>
      ))}
    </Modal>
  )
}

如果需要更强的类型约束，可给配置项增加泛型和对应Person子类型绑定。

方案3：插槽/组合式拆分 #

适合不同类型特有字段逻辑差异大、自定义程度高的场景，弹窗只封装公共逻辑，特有部分完全交给调用方控制。
核心思路是弹窗只处理通用的弹窗交互、公共字段渲染、提交校验逻辑，把特有字段部分留成插槽，父组件调用时传入对应类型的字段即可。

interface PersonFormModalProps<T extends Person> {
  visible: boolean;
  initialValue?: T;
  onSubmit: (value: T) => void;
  onCancel: () => void;
  children?: React.ReactNode; // 插槽用于传入特有字段
}
const PersonFormModal = <T extends Person>(props: PersonFormModalProps<T>) => {
  const { visible, initialValue, onSubmit, onCancel, children } = props;
  const [formValue, setFormValue] = useState<T>(initialValue ?? {} as T);

  const handleSubmit = () => {
    onSubmit(formValue);
  }

  return (
    <Modal visible={visible} onCancel={onCancel} onOk={handleSubmit}>
      {/* 公共字段渲染 */}
      <FormItem label="名">
        <Input value={formValue.firstName} onChange={e => setFormValue({...formValue, firstName: e.target.value})} />
      </FormItem>
      <FormItem label="姓">
        <Input value={formValue.lastName} onChange={e => setFormValue({...formValue, lastName: e.target.value})} />
      </FormItem>
      <FormItem label="出生日期">
        <DatePicker value={formValue.dateOfBirth} onChange={date => setFormValue({...formValue, dateOfBirth: date})} />
      </FormItem>
      {/* 特有字段插槽 */}
      {children}
    </Modal>
  )
}

调用示例：

// 编辑Client场景
<PersonFormModal<Client>
  visible={clientModalVisible}
  initialValue={clientData}
  onSubmit={handleSubmitClient}
  onCancel={() => setClientModalVisible(false)}
>
  <FormItem label="诊断信息">
    <Input.TextArea value={clientData.diagnose} onChange={e => /* 处理字段更新 */} />
  </FormItem>
</PersonFormModal>

// 编辑Specialist场景
<PersonFormModal<Specialist>
  visible={specialistModalVisible}
  initialValue={specialistData}
  onSubmit={handleSubmitSpecialist}
  onCancel={() => setSpecialistModalVisible(false)}
>
  <FormItem label="是否在岗">
    <Switch checked={specialistData.isAvailable} onChange={/* 处理字段更新 */} />
  </FormItem>
  <FormItem label="专长">
    <Input value={specialistData.speciality} onChange={/* 处理字段更新 */} />
  </FormItem>
</PersonFormModal>

小提示：如果项目中使用了React Hook Form、Formik、VeeValidate这类表单库，配合泛型可以更简单的实现表单状态和校验的类型绑定，不需要手动处理每个字段的onChange逻辑。

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