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

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

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

原文由 jacobsowles 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我遇到过几次。试试这些：

1. 输入你的 PrivateRoute 作为 React.FC<Props>
2. 将传入组件键入 React.ElementType

关于 React 类型的终极真相来自 文档

编辑：React.ReactType（已弃用）-> React.ElementType

原文由 Elias Toivanen 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

晚会，使用 "@types/react-router-dom": "^4.3.4" 和 "@types/react": "16.9.1" ，如果你使用 RouteProps ，你可能会得到同样的错误。

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

原文由 Yaobin Then 发布，翻译遵循 CC BY-SA 4.0 许可协议