Ошибка машинописного текста при передаче реквизита компоненту, являющемуся компонентом в форме избыточной формы - PullRequest
Новая
       37

Ошибка машинописного текста при передаче реквизита компоненту, являющемуся компонентом в форме избыточной формы

0 голосов
/ 26 июня 2018

У меня возникла следующая проблема при попытке экспортировать компонент формы с использованием redux-form.Я использую машинопись 2.9.2 и редукс-форму 7.3.0.Кто-нибудь знает, как изменить мои наборы для работы с этим? 

[ts]
Argument of type 'typeof ForgotPasswordForm' is not assignable to parameter of type 'ComponentType<IForgotPasswordFormProps & InjectedFormProps<Readonly<IForgotPasswordFormFields>, I...'.
  Type 'typeof ForgotPasswordForm' is not assignable to type 'StatelessComponent<IForgotPasswordFormProps & InjectedFormProps<Readonly<IForgotPasswordFormField...'.
    Type 'typeof ForgotPasswordForm' provides no match for the signature '(props: IForgotPasswordFormProps & InjectedFormProps<Readonly<IForgotPasswordFormFields>, IForgotPasswordFormProps> & { children?: ReactNode; }, context?: any): ReactElement<any>'.

Итак, здесь у меня есть такой компонент формы, я удалил много кода из компонента, чтобы сделать его более читабельным, но оставилинтерфейсы одинаковые: 

class ForgotPasswordForm extends Component<IForgotPasswordFormProps> {
    render() {
        return (
            <form>
                <Row center='xs'>
                        <Field name='username'
                               component={TextField}
                               label='Username'
                               className={styles.loginFormInput}
                               spellCheck={false}
                               onChange={this.clearForgotPasswordError}
                               validate={[required]}
                               autoFocus/>
                </Row>
            </form>
        );
    }
}

type IForgotPasswordFormFields = {
    username: string;
};

interface IForgotPasswordFormProps extends InjectedFormProps {
    sendForgotPasswordEmail: (username: string) => Promise<ForgotPasswordResponse>;
    loading: boolean | null;
    toggleForgotPasswordForm: () => void | null;
}

const reduxForgotPasswordForm = reduxForm<Readonly<IForgotPasswordFormFields>, IForgotPasswordFormProps>({
    form: 'ForgotPasswordForm'
})(ForgotPasswordForm) //<=== Error is showing here;

export default reduxForgotPasswordForm;

Компонент используется в родительском элементе следующим образом: 

<ForgotPasswordForm toggleForgotPasswordForm={this.toggleForgotPasswordForm}/>

1 Ответ

0 голосов
/ 27 июня 2018

Для тех, у кого есть проблемы такого же типа, это решение, которое я придумал, чтобы заставить наборы работать с компонентом формы-редукса, которому вы передаете реквизиты.Итак, в приведенном выше вопросе я перешел на тип компонента компоненты более высокого порядка reduxForm, чтобы он выглядел следующим образом: 

const reduxForgotPasswordForm = reduxForm<Readonly<IForgotPasswordFormData>, IPassedForgotPasswordProps>({
    form: 'ForgotPasswordForm'
})(ForgotPasswordForm);

И имел следующие интерфейсы: 

IForgotPasswordFormData {
    username: string;
}

IPassedForgotPasswordFormProps{
    toggleForgotPasswordForm: () => void;
}

И затем ключ был вIForgotPasswordFormProps, который используется при создании класса и расширении компонента, мне нужно было, чтобы следующий интерфейс расширял InjectedProps следующих типов: 

class ForgotPasswordForm extends Component<IForgotPasswordFormProps>

с IForgotPasswordFormProps, являющимся: 

interface IForgotPasswordFormProps extends InjectedFormProps<Readonly<IFormData>, IPassedForgotPasswordProps> {
    toggleForgotPasswordForm: () => void | null;
}
...