reactjs - Redux-Form v7 Field 组件 typescript 错误

Question

这是我使用 Field 组件的代码:

    interface EditProfileFormProps extends FormProps {
        defaults: object;
        submit: () => {};
        initialValues: object;
        roles: object[];
        specialties: object[];
    }

const EditProfileForm: React.StatelessComponent<EditProfileFormProps> = (props: EditProfileFormProps) => {
    return (
        <Form onSubmit={props.submit}>
            <div>
              <Field name="firstName" component={FirstName} type="text" />
            </div>
            <div>
              <Field name="lastName" component={LastName} type="text" />
            </div>
            <div>
              <Field name="role" props={{ roles: props.roles }} component={Role} type="select" />
            </div>
        </Form>
    );
};

//FirstName.tsx
export const FirstName: React.StatelessComponent<React.InputHTMLAttributes<HTMLInputElement>> = ({
    input,
}: React.InputHTMLAttributes<HTMLInputElement> & WrappedFieldProps) => (
    <FormGroup>
     <Label for="firstName">First Name</Label>
     <Input {...input} type="text" name="firstName" id="firstName" />
    </FormGroup>
);

这是我看到的 TS 错误:

[ts]
Type '{ name: "firstName"; component: StatelessComponent<InputHTMLAttributes<HTMLInputElement>>; type: ...' is not assignable to type '(IntrinsicAttributes & IntrinsicClassAttributes<Field<GenericFieldHTMLAttributes>> & Readonly<{ c...'.
  Type '{ name: "firstName"; component: StatelessComponent<InputHTMLAttributes<HTMLInputElement>>; type: ...' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Field<GenericFieldHTMLAttributes>> & Readonly<{ ch...'.
    Type '{ name: "firstName"; component: StatelessComponent<InputHTMLAttributes<HTMLInputElement>>; type: ...' is not assignable to type 'Readonly<BaseFieldProps<GenericFieldHTMLAttributes> & TextareaHTMLAttributes<HTMLTextAreaElement>>'.
     Types of property 'component' are incompatible.
        Type 'StatelessComponent<InputHTMLAttributes<HTMLInputElement>>' is not assignable to type '"input" | "select" | "textarea" | ComponentClass<GenericFieldHTMLAttributes> | StatelessComponent...'.
          Type 'StatelessComponent<InputHTMLAttributes<HTMLInputElement>>' is not assignable to type 'StatelessComponent<GenericFieldHTMLAttributes>'.
            Type 'React.ReactElement<any> | null' is not assignable to type 'React.ReactElement<any> | null'. Two different types with this name exist, but they are unrelated.
              Type 'ReactElement<any>' is not assignable to type 'ReactElement<any> | null'.
                Type 'React.ReactElement<any>' is not assignable to type 'React.ReactElement<any>'. Two different types with this name exist, but they are unrelated.
                  Types of property 'type' are incompatible.
                    Type 'string | React.ComponentClass<any> | React.StatelessComponent<any>' is not assignable to type 'string | React.ComponentClass<any> | React.StatelessComponent<any>'. Two different types with this name exist, but they are unrelated.
                      Type 'ComponentClass<any>' is not assignable to type 'string | ComponentClass<any> | StatelessComponent<any>'.
                        Type 'ComponentClass<any>' is not assignable to type 'StatelessComponent<any>'.
                          Type 'ComponentClass<any>' provides no match for the signature '(props: any, context?: any): ReactElement<any> | null'.

有人看到我做错了什么吗？

Answer 1

不确定这是否是您的问题，但是当我们制作无状态组件时，我们的签名看起来像这样 React.SFC 而不是 React.StatelessComponent。