Typescript：React Context 高阶组件类型错误

Posted 2023-04-14

【中文标题】Typescript：React Context 高阶组件类型错误

【英文标题】：Typescript: React Context higher order component type error

【发布时间】：2019-05-31 08:11:37

【问题描述】：

我正在尝试编写一个 React Context HOC 函数，以便我可以使用 Context 包装其他组件，从而允许我将所有通知发送到单个组件。我不得不从几个不同的指南中拼凑出一个可行的解决方案，主要是this one，因为它们都没有以原始形式完全发挥作用。

我最终得到的是这样的：

HOC：

import * as React from "react";
import  INotificationContextState, NotificationConsumer  from "./NotificationContext";

type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;

export default function withNotificationContext<
  P extends  notificationContext?: INotificationContextState ,
  R = Omit<P, 'notificationContext'>
  >(
  Component: React.ComponentClass<P> | React.StatelessComponent<P>
  ): React.SFC<R> 
  return function BoundComponent(props: R) 
    return (
      <NotificationConsumer> 
        value => <Component ...props notificationContext=value /> 
      </NotificationConsumer>
    );
  ;

上下文：

 interface IMessage 
    message: string;
    key: number;


interface INotificationState 
    open: boolean;
    messageInfo: IMessage;
    timeOut: number;

interface INotificationContextState extends INotificationState 
    handleClick(message: string): void;
    handleClose(event: React.MouseEvent<htmlElement>, reason: any): void;
    handleExited(): void;


const NotificationContext = React.createContext<INotificationContextState | null>(
    null
);

class NotificationProvider extends React.Component 
    public state: Readonly<INotificationState> = DEFAULT_STATE;
    private queue: IMessage[] = [];

    constructor(props: INotificationContextState) 
        super(props);
        this.handleClick = this.handleClick.bind(this);
        this.handleClose = this.handleClose.bind(this);
    
    // rest of the class methods...


export const NotificationConsumer = NotificationContext.Consumer;

HOC 文件在 value => <Component ...props notificationContext=value /> 行中的单词 Component 下给我一个红色下划线

错误内容如下：

类型 'R & notificationContext: INotificationContextState |空值; ' 不可分配给类型 'IntrinsicAttributes & P & children?: ReactNode; '。 类型 'R & notificationContext: INotificationContextState |空值; ' 不可分配给类型 'P'.ts(2322)

奇怪的是，这个错误并没有阻止我运行应用程序，而且包装器功能完全按照它应该的方式工作，并且被包装的组件能够将通知传递给 Notification 对象。

我的部分麻烦是不熟悉省略/选择语法，并试图在精神上准确地弄清楚“P”在这种情况下的类型定义是什么。我只是不知道它为什么会产生错误，但仍然有效。

【参考方案1】：

我目前也没有可行的解决方案。但是现在我迟到了传递给Component 的道具，如下所示：

<Component ...props as any notificationContext=value />

这仍然会给你在渲染方法中的类型，并且会消除错误。

【参考方案2】：

问题是通用的R。它默认为Omit<P, 'notificationContext'>，但它可以显式设置为任何值。运行代码时您没有任何问题，因为此默认值是您想要的值，但您不希望它是通用的。

您的 HOC 应该只有一个通用值。这里我使用通用的P 来引用外部组件的props。我们将需要 notificationContext 和一些 props P 的组件转换为只需要 P 的组件。

我必须将null 包含为notificationContext 属性的可能值之一，因为您的上下文值可能是null。

export default function withNotificationContext<P extends >(
    Component: React.ComponentType<P &  notificationContext: INotificationContextState | null >
): React.ComponentType<P> 
    return function BoundComponent(props: P) 
        return (
            <NotificationConsumer>
                value => <Component ...props notificationContext=value />
            </NotificationConsumer>
        );
    ;