React TypeScript项目中Ant Design表单form属性TS2339错误修复求助

这问题我之前做React TS项目时也碰到过，核心原因有两个：TypeScript类型定义缺失，以及组件没有被Ant Design的Form高阶组件正确包裹。下面一步步给你修复：

1. 修复TypeScript类型错误 #

首先，我们需要明确组件Props的类型，Ant Design的Form高阶组件会向组件注入form属性，这个属性的类型是FormComponentProps，我们需要从AntD的Form模块中导入它，并让组件的Props继承这个类型：

// 导入FormComponentProps
import { Form, Input, Button, Checkbox, FormComponentProps } from 'antd';

// 定义组件Props类型，继承FormComponentProps
interface DynamicRuleProps extends FormComponentProps {}

然后修改组件的定义，使用我们刚定义的DynamicRuleProps替代any：

export class DynamicRule extends React.Component<DynamicRuleProps> {
  // ... 原有代码保持不变
}

这样TypeScript就能识别this.props.form的类型，不会再报错TS2339了。

2. 用Form.create()包裹组件（必填校验生效的关键） #

你代码里的必填校验不生效，本质是因为你的DynamicRule组件没有被AntD的Form上下文包裹，getFieldDecorator无法关联到Form实例。我们需要用Form.create()来包装你的组件，这样AntD才会把Form实例注入到组件的props中：

在组件定义完成后，添加导出语句：

// 用Form.create()包裹组件，注入Form实例
export default Form.create<DynamicRuleProps>()(DynamicRule);

完整修复后的代码 #

import React from 'react';
import ReactDOM from 'react-dom';
import 'antd/dist/antd.css';
import { Form, Input, Button, Checkbox, FormComponentProps } from 'antd';

const formItemLayout = {
  labelCol: { span: 4 },
  wrapperCol: { span: 8 },
};
const formTailLayout = {
  labelCol: { span: 4 },
  wrapperCol: { span: 8, offset: 4 },
};

// 定义Props类型，继承FormComponentProps
interface DynamicRuleProps extends FormComponentProps {}

export class DynamicRule extends React.Component<DynamicRuleProps> {
  check = () => {
    this.props.form.validateFields(err => {
      if (!err) {
        console.info('success');
      }
    });
  };

  render() {
    const { getFieldDecorator } = this.props.form;
    return (
      <div>
        <Form.Item label="Name">
          {getFieldDecorator('username', {
            rules: [
              { required: true, message: 'Please input your name', },
            ],
          })(<Input placeholder="Please input your name" />)}
        </Form.Item>
        <Form.Item >
          <Button type="primary" onClick={this.check}> Check </Button>
        </Form.Item>
      </div>
    );
  }
}

// 用Form.create()包裹组件，注入Form实例
export default Form.create<DynamicRuleProps>()(DynamicRule);

额外说明（针对AntD v4+） #

如果你的项目用的是AntD v4及以上版本，除了Form.create()，也可以使用Form.useForm()结合类组件的方式，但Form.create()在v4中依然是兼容的。如果想尝试新方式，可以参考AntD官方文档的类组件示例，但上面的修复方案已经能完美解决你的问题。

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