Тип «{}» нельзя назначить типу «ComponentProps» - PullRequest
Новая
       6

Тип «{}» нельзя назначить типу «ComponentProps»

0 голосов
/ 13 января 2019

Я получаю следующую ошибку при создании компонента высокого порядка с TypeScript. Можете ли вы помочь мне решить эту проблему? 

Type '{}' is not assignable to type 'ComponentToWrapProps'

Мой код следующий:

Компонент: 

class LoginForm extends React.Component<ILoginFormProps, ILoginFormState> {
 public render() {
  // JSX
 }
}

const enhance = compose(
 withFormHelpers,
 withStyles(styles)
)

export default enhance(LoginForm)

И HOC: 

export interface IWithFormHelpersProps {}

export const withFormHelpers = <ComponentToWrapProps extends {}> 
 (ComponentToWrap: React.ComponentType<ComponentToWrapProps>) =>
   class WithFormHelpers extends React.Component<ComponentToWrapProps & IWithFormHelpersProps, {}> {
    public render() {
     return <>
      <ComponentToWrap />
     </>
    }

    onSubmitForm(event: React.FormEvent) {}

    onChangeInput(event: any) {}
   }

1 Ответ

0 голосов
/ 14 января 2019

Вы забыли поставить props на ComponentToWrap: 

 <ComponentToWrap {...this.props} />

Вы не можете просто позвонить <ComponentToWrap /> здесь. Это будет работать, только если знающий ComponentToWrap никогда не получит никаких реквизитов. Однако, по вашему определению, вы говорите, что он может получить некоторые (ComponentToWrapProps extends {}). Вот почему нам нужно передать реквизит от родителя внутреннему ребенку.

Реквизит придет от родителя и от IWithFormHelpersProps. В настоящее время IWithFormHelpersProps пусто, поэтому все, что вы передаете, это просто ComponentToWrapProps.

Однако, если у вашего IWithFormHelpersProps будут какие-либо свойства (скажем, foo и bar), вы должны выбрать их, прежде чем распространять остальные реквизиты. 

public render() {
 const { foo, bar, ...rest } = this.props;

 return <ComponentToWrap {...rest} />
}
...