React-Typescript: тип элемента JSX 'Component' не имеет никакой конструкции или сигнатуры вызовов

Question

Я написал ho c withContex:

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;

, и у меня возникла проблема с пропуском 'Component':

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

В другом компоненте с использованием этого ho c я вижу:

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