TypeScript 3:JSX元素类型"Component"没有任何构造或调用签名. [2604] [英] TypeScript 3: JSX element type 'Component' does not have any construct or call signatures. [2604]

问题描述

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

I'm trying to pass a variable of type React.Component (or React.FunctionComponent) into a Route, like this:

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

但是我遇到了这个错误:

But I'm getting this error:

JSX元素类型"Component"没有任何构造或调用签名. [2604]

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

我已经阅读了许多有关此问题的其他主题，但是它们似乎都处理了针对特定组件实现的错误.我不能更改有问题的组件或以不同的方式导入它(就像通常接受的答案一样)，因为它可能是任何组件.

I've read through a bunch of other threads about this issue, but they all seem to deal with this error coming up for a specific component implementation. I can't change the component in question or import it differently (like the accepted answers often suggest), because it could be any component.

我正在使用TypeScript 3.1.6，Babel Core 7.1和React 16.6.3.

I'm using TypeScript 3.1.6, Babel Core 7.1, and React 16.6.3.

推荐答案

我已经遇到过几次了.试试这些:

I have encountered this a couple of times. Try these:

1. 将PrivateRoute键入为React.SFC<Props>
2. 将您的传入组件键入为React.ReactType

1. Type your PrivateRoute as React.SFC<Props>
2. Type your incoming component as React.ReactType

关于React类型的最终真理来自文档

The ultimate truth about React types comes from the docs

这篇关于TypeScript 3:JSX元素类型"Component"没有任何构造或调用签名. [2604]的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！