reactjs - Typescript:React Context 高阶组件类型错误

Question

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

我最终得到的是这样的:

高级组织:

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 文件在 Component 一词下方给我一个红色下划线在 {value => <Component {...props} notificationContext={value} />} 行中

错误内容如下:

Type 'R & { notificationContext: INotificationContextState | null; }' is not assignable to type 'IntrinsicAttributes & P & { children?: ReactNode; }'. Type 'R & { notificationContext: INotificationContextState | null; }' is not assignable to type 'P'.ts(2322)

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

我的部分问题是不熟悉 Omit/Pick 语法，并试图在头脑中弄清楚“P”在这种情况下的类型定义到底是什么。我只是不知道为什么它会产生错误，但仍然有效。

Answer 1

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

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

这仍然会在渲染方法中为您提供类型，并且会消除错误。