React 无状态组件的流类型别名

Question

我正在尝试将流程实施到我的 React 应用程序中。到目前为止它工作正常，但我在使用默认值时遇到了问题。

函数头是：

const FormControls = ({ form, controls = null, labels = {} }: { form: any, controls: ?TFormControls, labels?: TFormControlLabels}) => (

TFormControls 的类型别名是：

type TFormControls = {
  onSubmit?: boolean,
  onReset?: boolean,
  onClear?: boolean
}

我希望，因为我在其中放置了一个 maybe 运算符 controls: ?TFormControls，它可能是我的类型别名或 null/undefined，但流程告诉我：

src/components/forms/FormControls.jsx:35
 35: const FormControls = ({ form, controls = null, labels = {} }: { form: any, controls: ?TFormControls, labels?: TFormControlLabels}) => (
                                   ^^^^^^^^ null. This type is incompatible with
 35: const FormControls = ({ form, controls = null, labels = {} }: { form: any, controls: ?TFormControls, labels?: TFormControlLabels}) => (
                                   ^^^^^^^^ object type

src/components/forms/FormControls.jsx:35
 35: const FormControls = ({ form, controls = null, labels = {} }: { form: any, controls: ?TFormControls, labels?: TFormControlLabels}) => (
                                   ^^^^^^^^ object type. This type is incompatible with
 35: const FormControls = ({ form, controls = null, labels = {} }: { form: any, controls: ?TFormControls, labels?: TFormControlLabels}) => (
                                   ^^^^^^^^ null

欢迎大家指点！

编辑：根据要求，完整函数错误为 example

Answer 1

您要查找的是defaultProps class property。

特别是，您可以通过以下方式定义道具参数：

type FormControlsPropsType = {
  form: Object,
  controls: TFormControls,
  labels: TFormControlLabels
};

const FormControls = ({
  form,
  controls,
  labels
} : FormControlsPropsType): React.Element<*> => (
  // ...etc
);

下面是您定义 defaultProps 的方式：

FormControls.defaultProps = {
  controls: null,
  labels: {},
}

最后，因为您定义的是默认值，所以没有理由使用可选参数定义 PropsType。你会看到我删除了 ?。

通过在参数定义中设置默认值，您可能运行与 React$Element 内部结构发生冲突。

这里是working FlowType example.

React 无状态组件的流类型别名

Flow Type aliases on React stateless components

reactjs

flowtype