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

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;

代码说明

  1. Depend 组件定义
    • 接收 namechildren 作为 props。
    • 使用 Form.useFormInstance() 获取当前表单实例。
    • name 转换为一个数组 names,以处理单个字段或多个字段的情况。
  1. 监听字段值
    • 使用 Form.useWatch 监听指定字段的值,并将所有字段的值存储在一个对象 values 中。
  1. 渲染子组件
    • values 传递给 children 函数,根据字段值动态渲染内容。

注意事项

  1. 类型声明
    • children 函数的参数类型应与表单字段的值类型一致。
    • 如果监听多个字段,values 对象中包含所有字段的值。
  1. 性能优化
    • 过多的 Form.useWatch 调用可能会影响性能,建议仅监听必要的字段。
  1. 嵌套使用
    • Depend 组件可以嵌套使用,以实现更复杂的动态渲染逻辑。
      通过 Depend 组件,可以轻松实现表单字段之间的动态依赖关系,提升表单的交互体验。
相关推荐
当牛作馬4 小时前
React——ant-design组件库使用问题记录
前端·react.js·前端框架
hxmmm5 小时前
react合成事件
react.js
然我7 小时前
React 事件机制:从代码到原理,彻底搞懂合成事件的核心逻辑
前端·react.js·面试
光影少年7 小时前
react16-react19都更新哪些内容?
前端·react.js
小陈phd7 小时前
langchain从入门到精通(四十一)——基于ReACT架构的Agent智能体设计与实现
react.js·架构·langchain
16年上任的CTO7 小时前
一文讲清楚React中的key值作用与原理
前端·javascript·react.js·react key
FogLetter12 小时前
从原生JS事件到React事件机制:深入理解前端事件处理
前端·javascript·react.js
胡gh13 小时前
React组件实用,每个组件各司其职,成为信息管理大师
前端·react.js
sophie旭13 小时前
《深入浅出react》总结之 10.2 渲染阶段流程探秘-completeWork
前端·react.js·源码