React-Typescript：JSX 元素类型“组件”没有任何构造或调用签名

Question

我写了 hoc withContext:

import React from 'react';
import permissionContext from 'context';

interface Props {
 Component: () => React.Component;
}

const withContext: React.FC<Props> = Component => {
 return function contextComponent(props: any) {
  return (
   <permissionContext.Consumer>
    {context => <Component {...props} permissionContext={context} />}
   </permissionContext.Consumer>
  );
 };
};

export default withContext;

我对“组件”道具有疑问：

JSX element type 'Component' does not have any construct or call signatures. 

在另一个组件中，我看到了这个 hoc：

Argument of type 'FC<Props>' is not assignable to parameter of type 'PropsWithChildren<Props>'.
Property 'Component' is missing in type 'FC<Props>' but required in type 'Props'.

我是打字稿的新手。

Answer 1

withContext 不是一个 React 组件，而是一个返回一个的函数。组件名称也应大写。试试这个：

const withContext = (Component: React.FC<Props>) => {
  return function contextComponent(props: any) {
    return (
      <permissionContext.Consumer>
        {context => <Component {...props} permissionContext={context} />}
      </permissionContext.Consumer>
    );
  };
};