javascript - React HOC 上的 Typescript

Question

我的 React HOC 结构如下:

import React from 'react';
import { CookiesConsumer } from './index';

const withCookies = (WrappedComponent: any) => (props: any) => (
  <CookiesConsumer>
    {cookies => (
      <WrappedComponent
        {...props}
        cookiesContext={cookies}
      />
    )}
  </CookiesConsumer>
);

export default withCookies;

我收到了 2 个 Typescript eslint 警告，我想修复它。两者都在 any 类型声明上:

任何意外。指定不同的类型。eslint(@typescript-eslint/no-explicit-any)

对于 props 类型，我不知道 props 对象中可能有哪些属性或值类型，那么如何才能比 any 更好地定义它？

对于 WrappedComponent 类型，我尝试了 ReactNode 或 ReactElement 等类型，但这在实际使用时引发了一个新错误:JSX 元素类型“WrappedComponent”没有任何构造或调用签名。

Answer 1

import React from 'react';
import { CookiesConsumer } from './index';

interface withCookiesProps {
    someProp: boolean;
  }


const withCookies = <P extends object>(WrappedComponent: React.ComponentType<P>) => (props: P & withCookiesProps) => (
  <CookiesConsumer>
    {cookies => (
      <WrappedComponent
        {...props}
        cookiesContext={cookies}
      />
    )}
  </CookiesConsumer>
);

export default withCookies;

Refernence