如何为redux-form的Field包装器添加类型？Flow类型定义咨询

Great question! Let's clear this up for you—you haven't missed anything in redux-form's Flow definitions. The library intentionally only exports FieldProps (the props passed to the render component you pass to Field) because that's the most common type needed for custom input components. But we can still type your InputField properly depending on how you've structured it.

Scenario 1: InputField is a render component for redux-form's Field #

If your InputField is meant to be passed as the component prop to Field (like <Field name="email" component={InputField} />), its props will be a combination of FieldProps (from redux-form) and your custom props.

Here's how to define the types:

// @flow
import type { FieldProps } from 'redux-form';

// Define your custom props for InputField
type InputFieldCustomProps = {
  label?: string,
  placeholder?: string,
  isRequired?: boolean,
  // Add any other custom props your component accepts
};

// Combine redux-form's FieldProps with your custom props
type InputFieldProps = FieldProps & InputFieldCustomProps;

const InputField = ({
  input,
  meta,
  label,
  placeholder,
  isRequired,
}: InputFieldProps) => (
  <div className="input-field">
    {label && (
      <label htmlFor={input.name}>
        {label} {isRequired && '*'}
      </label>
    )}
    <input
      {...input}
      id={input.name}
      placeholder={placeholder}
      aria-invalid={meta.error && meta.touched}
    />
    {meta.touched && meta.error && (
      <span className="error-message">{meta.error}</span>
    )}
  </div>
);

export default InputField;

Scenario 2: InputField wraps redux-form's Field component #

If your InputField internally renders a Field component (so you can use it directly like <InputField name="email" label="Email" />), you'll need to type it to accept all of Field's props plus your custom ones. Since redux-form doesn't export Field's props type directly, use Flow's built-in $PropsType utility to extract it from the Field component itself.

Here's the implementation:

// @flow
import Field from 'redux-form/lib/Field';
import type { FieldProps } from 'redux-form';

// Extract the props type from redux-form's Field component
type ReduxFormFieldProps = $PropsType<typeof Field>;

// Define your custom props
type InputFieldCustomProps = {
  label?: string,
  // Add any other custom props here
};

// Combine both types
type InputFieldProps = ReduxFormFieldProps & InputFieldCustomProps;

const InputField = ({ label, ...fieldProps }: InputFieldProps) => (
  <div className="input-field">
    {label && <label htmlFor={fieldProps.name}>{label}</label>}
    <Field
      {...fieldProps}
      component={({ input, meta }: FieldProps) => (
        <>
          <input
            {...input}
            id={fieldProps.name}
            aria-invalid={meta.error && meta.touched}
          />
          {meta.touched && meta.error && (
            <span className="error-message">{meta.error}</span>
          )}
        </>
      )}
    />
  </div>
);

export default InputField;

Key Notes #

• Redux-form focuses on exporting FieldProps because that's what most custom input components need to interact with the form state (via input and meta objects).
• Using $PropsType<typeof Field> is a safe, idiomatic way in Flow to get the props type of any React component when it's not exported explicitly.

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