react tsx组件中使用 antd From 表单，父组件传值到子组件类型定义报错

Lydia500

已于 2022-10-13 14:04:57 修改

阅读量2.4k

点赞数 3

分类专栏：前端文章标签： ReactTSX AntdForm 类型定义父子组件 FormComponentProps

于 2022-03-23 16:01:15 首次发布

本文链接：https://blog.youkuaiyun.com/Cavin80/article/details/123688559

版权

前端专栏收录该内容

21 篇文章

订阅专栏

本文介绍如何在ReactTSX项目中使用Ant Design Form组件时，避免父组件向子组件传递类型定义时的报错。通过引入并扩展antdForm类型，解决了类型不匹配的问题，并提供了详细的代码示例和步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

react tsx组件中使用 antd From 表单，父组件传值到子组件类型定义报错

解决方案：
引入antd Form类型声明，继承 antd类型声明的接口

import { FormComponentProps } from 'antd/lib/form';

interface MyProps extends FormComponentProps {
  text?: string;
}

const Son = (props: MyProps): JSX.Element => {
  return  <Form>...</Form>
  
const SonForm = Form.create<MyProps>({ name: 'son_form' })(Son);

export default SonForm;