如何使用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>;
}
}
}

我得到的错误是：

键入'Readonly&只读<｛children？：ReactNode；｝>'不可分配给类型"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>;
}
}
}

游乐场