类型“{}”不可分配给类型 'ComponentProps'

Question

我在使用 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) {}
   }

Answer 1

您忘记将 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} />
}

类型“{}”不可分配给类型 'ComponentProps'

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

generics

class

typescript

reactjs

typescript-generics