如何使用 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<{ children?: ReactNode; }>' is not assignable to type 'IntrinsicAttributes & LibraryManagedAttributes<ComponentType, PropsWithChildren>'.

看起来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

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

How do I make a higher order React component with Typescript?

reactjs

typescript

higher-order-components