如何将子类型传递给HOC react的道具

Question

我是新的TypeScript和我正在努力写HOC与typecheck。这是我的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;

它抛出一个错误：

类型（组件：反应。组件类型

我完全不知道如何继续使用这段代码，也不知道如何让它工作。

有什么想法吗？

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将从函数定义中推断出正确的类型。