TypeScript 3: тип элемента JSX «Компонент» не имеет никакой конструкции или сигнатуры вызовов.[2604]

Question

Я пытаюсь передать переменную типа React.Component (или React.FunctionComponent) в маршрут, например:

import React from 'react';
import { Route } from 'react-router-dom';

type PrivateRouteProps = {
  component: React.Component | React.FunctionComponent;
  isAuthenticated: boolean;
  login: (...args: any[]) => any;
  path: string;
};

const PrivateRoute: React.FunctionComponent<PrivateRouteProps> = ({
  component: Component,
  isAuthenticated,
  login,
  path,
  ...rest
}) => {
  return (
    <Route
      path={path}
      {...rest}
      render={props => {
        if (isAuthenticated) {
          return <Component {...props} />;
        } else {
          login();
          return null;
        }
      }}
    />
  );
};

Но я получаю эту ошибку:

Тип элемента JSX 'Компонент' не имеет никакой конструкции или сигнатуры вызовов.[2604]

Я прочитал множество других потоков об этой проблеме, но все они, похоже, имеют дело с этой ошибкой, возникающей для реализации конкретного компонента.Я не могу изменить рассматриваемый компонент или импортировать его по-другому (как часто предлагают принятые ответы), потому что это может быть любой компонент.

Я использую TypeScript 3.1.6,Babel Core 7.1 и React 16.6.3.

Answer 1

Поздно к вечеринке, с "@types/react-router-dom": "^4.3.4" и "@types/react": "16.9.1", и если вы используете RouteProps, вы, вероятно, получите ту же ошибку.

Тип элемента JSX 'Компонент'не имеет никакой конструкции или подписи вызовов.[2604]

Это потому, что в интерфейсе RouteProps, component определен как необязательный, следовательно, он может быть неопределенным.

export interface RouteProps {
  location?: H.Location;
  component?: React.ComponentType<RouteComponentProps<any>> | React.ComponentType<any>;
  render?: ((props: RouteComponentProps<any>) => React.ReactNode);
  children?: ((props: RouteChildrenProps<any>) => React.ReactNode) | React.ReactNode;
  path?: string | string[];
  exact?: boolean;
  sensitive?: boolean;
  strict?: boolean;
}

Просто проверьте, еслиcomponent ложно это исправит.

function PrivateRoute({ component: Component, ...rest }: RouteProps) {
  if (!Component) return null;
  return (
    <Route
      {...rest}
      render={props =>
        fakeAuth.isAuthenticated ? (
          <Component {...props} />
        ) : (
          <Redirect
            to={{
              pathname: "/login",
              state: { from: props.location }
            }}
          />
        )
      }
    />
  );
}

Answer 2

Я сталкивался с этим пару раз.Попробуйте следующее:

1. Введите PrivateRoute как React.SFC<Props>
2. Введите входящий компонент как React.ReactType

Окончательная истина о типах Reactисходит от документы