Depend
组件文档
组件概述
Depend
是一个自定义的 React 组件,用于根据表单字段的值动态渲染子组件。它结合了 Ant Design 的 Form
组件的useWatch与useFormInstance,能够根据指定表单字段的值变化来决定是否渲染特定的表单项。
组件 Props
name
(必填)
- 类型 :
string | string[]
- 说明: 指定需要监听的表单字段名。可以是一个字段名或多个字段名的数组。
children
- 类型 :
(values: Record<string, any>) => React.ReactNode
- 说明: 一个函数,接收当前监听字段的值作为参数,并返回要渲染的 React 组件。
使用场景
Depend
组件适用于需要根据某个或某些表单字段的值动态显示或隐藏某些表单项的场景。例如:
- 根据某个字段的值是否为特定值(如
age === 18
)来显示或隐藏其他表单项。 - 根据多个字段的组合值动态渲染不同的表单内容。
示例代码
jsx
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;
代码说明
Depend
组件定义
-
- 接收
name
和children
作为 props。 - 使用
Form.useFormInstance()
获取当前表单实例。 - 将
name
转换为一个数组names
,以处理单个字段或多个字段的情况。
- 接收
- 监听字段值
-
- 使用
Form.useWatch
监听指定字段的值,并将所有字段的值存储在一个对象values
中。
- 使用
- 渲染子组件
-
- 将
values
传递给children
函数,根据字段值动态渲染内容。
- 将
注意事项
- 类型声明
-
children
函数的参数类型应与表单字段的值类型一致。- 如果监听多个字段,
values
对象中包含所有字段的值。
- 性能优化
-
- 过多的
Form.useWatch
调用可能会影响性能,建议仅监听必要的字段。
- 过多的
- 嵌套使用
-
Depend
组件可以嵌套使用,以实现更复杂的动态渲染逻辑。
通过Depend
组件,可以轻松实现表单字段之间的动态依赖关系,提升表单的交互体验。