如何将 Flow 类型与 Ant Design 表单集成？答案

【问题标题】：How to integrate Flow type with Ant Design form?如何将 Flow 类型与 Ant Design 表单集成？
【发布时间】：2018-12-15 08:36:54
【问题描述】：

我使用 Ant Design 的 Form 作为我的组件 FormComponent 的包装器。然而，这种包装否定了 Flow 的检查，即我总是将所需的道具传递给FormComponent。

    import { Form } from "antd"

    type Props = {|
      userID: string,
      form: Form,
    |};

    class FormComponent extends Component<Props> {
        ...
    }

    export default Form.create()(FormComponent);

通常，如果我在另一个文件中调用 <FormComponent /> 而不传递任何道具，Flow 会抛出错误。但是，Form.create() 包装似乎阻止了此错误检查。我该如何取回它？我试过Form.create<Props>()(FormComponent)，但没用。

【问题讨论】：

标签： reactjs flowtype antd

【解决方案1】：

我正在这样做，它有点工作：

import type { FormProps } from 'antd';
import { Form } from 'antd';

type OwnProps = {|
  userID: string,
|};

type Props = OwnProps & FormProps;

class FormComponent extends Component<Props> {
  ...
}

export default Form.create()(FormComponent);

唯一让我抓狂的是form 属性在FormProps 中是可选的，并且流程希望我在访问validateFields() 之前检查typeof this.props.form !== 'undefined' 是否。

有没有人找到比这个更好的解决方案？

【讨论】：