基于antd组件库，手写动态渲染表单项组件

Depend 组件文档

组件概述

Depend 是一个自定义的 React 组件，用于根据表单字段的值动态渲染子组件。它结合了 Ant Design 的 Form 组件的useWatch与useFormInstance，能够根据指定表单字段的值变化来决定是否渲染特定的表单项。

组件 Props

name (必填)

• 类型 : string | string[]
• 说明: 指定需要监听的表单字段名。可以是一个字段名或多个字段名的数组。

children

• 类型 : (values: Record<string, any>) => React.ReactNode
• 说明: 一个函数，接收当前监听字段的值作为参数，并返回要渲染的 React 组件。

---

使用场景

Depend 组件适用于需要根据某个或某些表单字段的值动态显示或隐藏某些表单项的场景。例如：

• 根据某个字段的值是否为特定值（如 age === 18）来显示或隐藏其他表单项。
• 根据多个字段的组合值动态渲染不同的表单内容。

---

示例代码

import { Button, Form, Input, type FormInstance } from "antd";
const Demo = () => {
  const Depend = (props: { name: string | string[], children: (value: any, form: FormInstance<any>) => React.ReactNode }) => {
    const { name, children } = props;
    const form = Form.useFormInstance();
    const names = Array.isArray(name) ? name.flat() : [name];
    const values = names.reduce((acc, fieldName) => {
      acc[fieldName] = Form.useWatch(fieldName, form);
      return acc;
    }, {} as Record<string, any>);
    return (
      <>
        {children(values, form)}
      </>
    );
  };
  return (
    <Form onFinish={(value) => {
      console.log(value);
    }}>
      <Form.Item name='age' label='年龄'>
        <Input />
      </Form.Item>
      <Depend name={['age']}>
        {({ age }) => {
          if (age == 18) {
            return <Form.Item name="size" label="尺寸">
              <Input />
            </Form.Item>;
          }
          return null;
        }}
      </Depend>
      <Depend name={['size']}>
        {({ size }) => {
          if (size == 20) {
            return <Form.Item name="height" label="身高">
              <Input />
            </Form.Item>;
          }
          return null;
        }}
      </Depend>
      <Form.Item>
        <Button htmlType="submit">提交</Button>
      </Form.Item>
    </Form>
  );
};
export default Demo;

代码说明

1. Depend 组件定义

• • 接收 name 和 children 作为 props。
  • 使用 Form.useFormInstance() 获取当前表单实例。
  • 将 name 转换为一个数组 names，以处理单个字段或多个字段的情况。

2. 监听字段值

• • 使用 Form.useWatch 监听指定字段的值，并将所有字段的值存储在一个对象 values 中。

3. 渲染子组件

• • 将 values 传递给 children 函数，根据字段值动态渲染内容。

---

注意事项

1. 类型声明

• • children 函数的参数类型应与表单字段的值类型一致。
  • 如果监听多个字段，values 对象中包含所有字段的值。

2. 性能优化

• • 过多的 Form.useWatch 调用可能会影响性能，建议仅监听必要的字段。

3. 嵌套使用

• • Depend 组件可以嵌套使用，以实现更复杂的动态渲染逻辑。
    通过 Depend 组件，可以轻松实现表单字段之间的动态依赖关系，提升表单的交互体验。