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

Question

我有这个组件。

//@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 道具？ redux-forms index.js.flow 导出 renderField(FieldProps) 的类型，但不导出 Field 组件的类型。我错过了什么吗？

Answer 1

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

然后你可以这样做：

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

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

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

How to add types for redux-form's Field wrapper

flowtype

redux-form