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”

1 个答案: