如何为 redux-form 字段包装器添加类型

【问题标题】：How to add types for redux-form's Field wrapper如何为 redux-form 字段包装器添加类型
【发布时间】：2018-02-05 20:07:46
【问题描述】：

我有这个组件。

//@flow
import React from 'react'
import { Field } from 'redux-form'
import type { FieldProps } from 'redux-form';
import TextField from 'material-ui/TextField'

const renderField= ({ input, label, disabled, meta: { touched, error } }: FieldProps) => {
  //component defn
}

export const InputField = (props) => {
  return (
    <Field
      {...props}
      component={renderField}
    />
  )
}

输入字段接受 redux-form 字段接受的所有道具以及自定义道具。 问题是如何让 InputField 的 props 流动起来？ redux-forms index.js.flow 为 renderField(FieldProps) 导出类型，但它不为 Field 组件导出类型。我错过了什么吗？

【问题讨论】：

标签： redux-form flowtype

【解决方案1】：

您可以使用React.ElementProps（import type { ElementProps } from 'react' 或将您的反应导入更改为import * as React from 'react'）。

然后你可以这样做：

type OGFieldProps = React.ElementProps<typeof Field>
type Props = $Diff<OGFieldProps, { component: $PropertyType<OGFieldProps, 'component'> }>

我做差异的原因是因为否则你将不得不传递组件，但由于你已经在 InputField 中做它，你可能不希望有人认为它会通过一个覆盖。

【讨论】：