React-Typescript：JSX 元素类型 'Component' 没有任何构造或调用签名

Question

我用Contex:编写了hoc

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>
);
};
};