IT技术 - TypeScript 3：JSX 元素类型“组件”没有任何构造或调用签名。[2604] - 吾爱随笔录

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

IT技术 javascript reactjs typescript jsx

2021-04-27 04:31:02

我正在尝试将 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 元素类型“组件”没有任何构造或调用签名。[2604]

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

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

4个回答

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

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

我遇到过几次这种情况。试试这些：

键入您的PrivateRoute身份React.FC<Props>
键入您的传入组件为 React.ElementType

React 类型的最终真相来自文档

编辑：React.ReactType（不推荐使用）-> React.ElementType

甚至后来参加聚会，但对我有用的是：

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

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

<PrivateRoute path="'/>
Path在使用接口 PrivateRouteProps 时出错，然后我将其切换到

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

其它你可能感兴趣的问题

上一篇细丝研磨问题增加下一篇科塞尔的预期寿命是多少？