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

使用"@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 }
            }}
          />
        )
      }
    />
  );
}

Answer 2

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

将您的$data = json_decode($jsonString, true); $history = $data['callExpDateMap']; foreach( $history as $date => $entry ) { foreach ( $entry as $key => $row ) { $strikePrice = $row['strikePrice']; echo "Date : " . $date . "\n"; echo "Strike price : " . $strikePrice . "\n"; } }输入为PrivateRoute
将您的传入组件键入为React.SFC<Props>

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

Answer 3

这已经晚了，但如果有人不想要一个解决方案而是一个解释，让我们用一个例子来演示这个错误

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

假设我们想创建一个动态支付表单，如果查询参数是 with=stripe 那么我们假设他想用 stripe 支付，如果是用 razorpay 我们假设它，......等。

然后我们做类似的事情

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.

发生了什么？

什么是组件？

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

所以？

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

所以基本上，期望 x 是任何类型的构造函数，无论是函数还是类，如果是函数，则函数是渲染函数，如果是类，则需要渲染方法。

回到我们的问题

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>
}

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

如果您想将其用作组件怎么办？

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

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

正式地，你传递的是构造函数而不是实例。

Answer 4

甚至晚些时候参加聚会，但对我有用的是：

interface PrivateRouteProps extends Omit<RouteProps, "component"> {
  component: React.ElementType;
  // any additional vars
}

PrivateRoute: React.FC<PrivateRouteProps> = ({
  component: Component,
  ...rest
}) => {
// render code
}

Answer 5

我能够通过按如下所示键入组件来解决该错误：

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

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

6 个答案:

什么是组件？

所以？

回到我们的问题

如果您想将其用作组件怎么办？