如何使用 Typescript 制作更高阶的 React 组件？

Question

我正在尝试使用 Typescript 制作更高阶的组件，但我遇到了类型不匹配的问题。我完全剥离了它，所以它应该只包装组件，但仍然出现错误：

import * as React from 'react';

export function createPage<Props extends {}, ComponentType extends React.ComponentType<Props>>(
  Component: ComponentType
) {
  return class WrappedComponent extends React.Component<Props> {
    render() {
      return <Component {...this.props}></Component>;
    }
  }
}

我得到的错误是：

Type 'Readonly & Readonly' 不可分配给类型 'IntrinsicAttributes & LibraryManagedAttributes'。

看起来IntrinsicAttributes 什么都比不上，但LibraryManagedAttributes 对我来说绝对是不可思议的。

Answer 1

您只需要为 Props 提供一个通用参数

export function createPage<Props>(
  Component: React.ComponentType<Props>
) {
  return class WrappedComponent extends React.Component<Props> {
    render() {
      return <Component {...this.props}></Component>;
    }
  }
}

Playground