TypeScript 3：JSX元素类型“Component”没有任何构造或调用签名。 [2604]

Question

我正在尝试将类型为React.Component（或React.FunctionComponent）的变量传递给Route，如下所示：

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元素类型“Component”没有任何构造或调用签名。 [2604]

我已经阅读了很多关于这个问题的其他线程，但它们似乎都在处理针对特定组件实现的这个错误。我无法更改有问题的组件或以不同的方式导入它（如通常建议的接受的答案），因为它可能是任何组件。

我使用的是TypeScript 3.1.6，Babel Core 7.1和React 16.6.3。

Answer 1

我曾经遇到过这种情况。试试这些：

1. 输入你的PrivateRoute作为React.SFC<Props>
2. 输入您的传入组件为React.ReactType

关于React类型的最终真相来自the docs