如何将儿童类型传递给 HOC 反应的道具

Question

我是 TypeScript 的新手，我正在努力编写带有 typecheck 的 HOC。 这是我的 HOC：

import React from 'react';
import Firebase from './Firebase';

export type FirebaseType = Firebase;

interface OwnProps {
  firebase: typeof Firebase;
}

const FirebaseContext = React.createContext(new Firebase());

export const withFirebase: React.FC = <T extends OwnProps>(
  Component: React.ComponentType<T>,
): React.ComponentType<T> => (props) => (
  <FirebaseContext.Consumer>
    {(firebase: FirebaseType) => <Component {...props} firebase={firebase} />}
  </FirebaseContext.Consumer>
);

export default FirebaseContext;

它会抛出一个错误：

类型'（组件：React.ComponentType）=> React.ComponentType' 不可分配给类型'FC'。种类 参数“组件”和“道具”不兼容。 类型 '{ children?: ReactNode; }' 不可分配给类型 'ComponentType'。 类型 '{ children?: ReactNode; }' 不可分配给类型 'FunctionComponent'。 类型 '{ children?: ReactNode; }' 没有为签名 '(props: PropsWithChildren, context?: any): ReactElement ReactElement 组件）> |空） | （新的 (props: any) => 组件<...>)> |空'.ts(2322)

我完全不知道如何继续使用此代码或如何使其工作。

有什么想法吗？

Answer 1

以下是该错误的含义：

在您的类型定义中，您期望 withFirebase 具有与函数组件 (React.FC) 相同的类型签名，该函数组件接受 props 并返回一个 React 元素（或 null）。

但是，这不是您想要的 HOC，您希望它接收一个组件 (React.ComponentType) 并返回一个组件 (React.ComponentType)。

这应该可行：

type HOC = (Component: React.ComponentType) => React.ComponentType;
// Or, if you want to be more specific:
// type HOC = <T extends OwnProps>(Component: React.ComponentType<T>) => React.ComponentType<T>

export const withFirebase: HOC = <T extends OwnProps>(
  Component: React.ComponentType<T>,
): React.ComponentType<T> => (props) => (
  <FirebaseContext.Consumer>
    {(firebase: FirebaseType) => <Component {...props} firebase={firebase} />}
  </FirebaseContext.Consumer>
);

或者你也可以省略 HOC 类型，TypeScript 会从函数定义中推断出正确的类型。