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

Posted 2023-03-10

【中文标题】如何将儿童类型传递给 HOC 反应的道具

【英文标题】：How to pass children type to props of HOC react

【发布时间】：2020-04-28 13:37:16

【问题描述】：

我是 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)

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

有什么想法吗？

【问题讨论】：

亲爱的@VasylButov，您可以回复this post。也许它可以帮助你。

【参考方案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 会从函数定义中推断出正确的类型。

【讨论】：

好的，非常感谢！这解决了 TS 错误，但是，如果我从其他文件导入 withFirebase(Component)，它说我没有提供 firebase 道具（我在 HOC 中做过）并要求我隐式设置它。先生，我该如何解决？

将返回类型固定为React.ComponentType<Omit<T, keyof WithFirebase>> & WithFirebase，似乎没问题！谢谢！

有没有办法从组件本身而不是 HOC 做到这一点？