Javascript 类型脚本3:JSX元素类型'；组件'；没有任何构造或调用签名。[2604]

我试图将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;
        }
      }}
    />
  );
};

从“React”导入React；
从'react router dom'导入{Route}；
类型PrivateRouteProps={
组件：React.component | React.FunctionComponent；
未验证：布尔值；
登录：（…args:any[]）=>any；
路径：字符串；
};
常量PrivateRoute:React.FunctionComponent=({
组件：组件，
我得到了认证，
登录，
路径
休息
}) => {
返回(
{
如果（未经验证）{
返回；
}否则{
登录（）；
返回null；
}
}}
/>
);
};

但我得到了一个错误：

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

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

---

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

我已经遇到过好几次了。试试这些：

键入您的

PrivateRoute

as

React.FC

将传入组件键入

React.ElementType

关于反应类型的终极真理来自

---

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

迟到，带有

“@types/React路由器dom”：“^4.3.4”

和

“@types/React”：“16.9.1”

，如果您使用

RouteProps

，可能会出现相同的错误

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

这是因为在

RouteProps

接口中，

组件

被定义为可选的，因此它可能未定义

导出接口路由操作{
位置？：H.位置；
组件？：React.ComponentType | React.ComponentType；
渲染？：（（props:RouteComponentProps）=>React.ReactNode）；
儿童：（（道具：RouteChildrenProps）=>React.ReactNode）| React.ReactNode；
路径？：字符串|字符串[]；
精确？：布尔；
敏感？：布尔值；
严格？：布尔；
}

只需检查

组件是否损坏，falsy就会修复它

函数privaterout（{component:component，…rest}:RouteProps）{
如果（！组件）返回空值；
返回(
伪造的。是否已验证(
) : (
)
}
/>
);
}
即使是在晚会之后，但对我来说最有效的是：


接口PrivateRouteProps扩展忽略{
组件：React.ElementType；
//还有其他变量吗
}
PrivateRoute:React.FC=({
组件：组件，
休息
}) => {
//渲染代码
}
我可以通过键入我的组件来解决错误，如下所示：

...
export function withApollo (PageComponent: () => JSX.Element) {
const WithApollo = <T extends object>(props: T) => {
...

。。。
使用Apollo导出函数（PageComponent:（）=>JSX.Element）{
阿波罗常数=（道具：T）=>{
...
这已经很晚了，但如果有人不想要解决方案，而是想要一个解释，那么让我们用一个例子来说明这个错误

function PaymentPage(){
  
   return <div>Payment Page</div>
}


会发生什么

什么是组件？

返回JSX.Element类型元素的构造函数

所以

我们不是在返回构造函数，而是在返回构造函数调用，这与假设
GatewayComponent
是一个构造函数相同，但它不是，它是一个包含JSX的变量

所以基本上，期望x是任何类型的构造函数，无论是函数还是类，如果它是函数，函数就是呈现函数，如果它是类，它需要呈现方法

回到我们的问题上来
函数PaymentPage（）{
const路由器=useRouter；
const{with_}=router.query；
let gateway:gateway | null=null；
开关（带开关）{
“条纹”案例：
网关=；
打破
“razorpay”案：
网关=
打破
}
返回{gateway}
}

因为网关持有JSX，而不是返回JSX的构造函数

如果要将其用作组件，该怎么办？
函数PaymentPage（）{
const路由器=useRouter；
const{with}=router.query；
let GatewayComponent:Gateway | null=null；
开关（带开关）{
“条纹”案例：
return（）=>
“razorpay”案：
return（）=>
}
返回
}

现在它是一个构造函数，我们现在可以将它用作组件

正式地说，你传递的是构造函数，而不是实例。
#2对我有效。现在是时候做一些研究，弄清楚它的确切原因了。也感谢到文档的链接。
export-const-BackNavigationTextWrapper=（WrappedComponent:typeof-React.Component）=>{const-backnavigationtexwrappedcomponent=（props，{commonElements={}}：any=>{return}；BackNavigationTextWrappedComponent.type=WrappedComponent.type；return BackNavigationTextWrappedComponent；}；
我收到一个错误“类型'typeof Component'上的属性'type'不存在”。尝试了React.ReactType，它可以工作，但似乎已被弃用，因此当前合适的类型是
React.ElementType
。VS代码中没有错误。@MiguelVacas谢谢…我更新了答案。我通常不会写无用的“谢谢”评论，但谢谢！我一直在深入挖掘，这是唯一一个提到条件性是一个潜在问题的东西，它为我解决了它。谢谢，这真的很有用！我没有意识到：）我一点也没有遵循这一点。你的例子与原来的问题不相似，所以我不知道如何关联。以及h线返回错误？依我看，这是最好的答案，因为这可以防止使用没有组件的PrivateRoute。对我来说效果很好
function PaymentPage(){
   const router = useRouter;
   const {with_} = router.query;
   let GatewayComponent: Gateway | null = null;
   switch(with_){
     case 'stripe':
       GatewayComponent = <StripeGateway/>;
       break;
     case 'razorpay':
       GatewayComponent = <RazorpayGateway/>;
       break;
   }
   return <GatewayComponent/>
}

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

function PaymentPage(){
   const router = useRouter;
   const {with_} = router.query;
   let gateway: Gateway | null = null;
   switch(with_){
     case 'stripe':
       gateway = <StripeGateway/>;
       break;
     case 'razorpay':
       gateway = <RazorpayGateway/>
       break;
   }
   return <React.Fragment> {gateway} </React.Fragment>
}

function PaymentPage(){
   const router = useRouter;
   const {with} = router.query;
   let GatewayComponent: Gateway | null = null;
   switch(with_){
     case 'stripe':
       return () => <StripeGateway/>
     case 'razorpay':
       return () => <RazorpayGateway/>
   }
   return <GatewayComponent/>
}

export type PrivateRouteProps = {
  component: React.ElementType;
  currentUser?: any;
} & RouteProps;```


import { Route, Redirect, RouteProps } from "react-router-dom";
export type PrivateRouteProps = {
  component: React.ElementType;
  currentUser?: any;
} & RouteProps;

const PrivateRoute: React.FC<PrivateRouteProps> = ({
  component: Component,
  currentUser,
  ...rest
}) => (
  <Route
    {...rest}
    render={(props) =>
      currentUser ? <Component {...props} /> : <Redirect to="/" />
    }
  />
);