相关疑难解决方法(0)

我正在尝试在 tsx 文件中导入 jsx 文件。这导致了错误

错误 TS2604：JSX 元素类型“Test”没有任何构造或调用签名。

我使用 webpack , react, typescript, Import tsx files 没有问题，但是任何 jsx 文件都会导致编译错误，

包.json

{
  "name": "typescript-babel-webpack",
  "version": "1.0.0",
  "description": "A simple lightweight TypeScript + Babel + Webpack project.",
  "scripts": {
    "build": "webpack"
  },

  "license": "",
  "devDependencies": {
    "babel-core": "^6.20.0",
    "babel-loader": "^6.2.9",
    "babel-plugin-transform-runtime": "^6.15.0",
    "babel-preset-es2015": "^6.18.0",
    "babel-preset-react": "^6.16.0",
    "css-loader": "^0.26.1",
    "inline-style-prefixer": "^2.0.4",
    "react-style-proptype": "^1.4.0",
    "style-loader": "^0.13.1",
    "ts-loader": "^1.3.1",
    "typescript": "^2.1.4",
    "webpack": "^1.14.0",
    "webpack-dev-server": "^1.16.2",
    "@types/react": "^0.14.55",
    "@types/react-dom": "^0.14.19"

  },
  "dependencies": {
    "event-emitter-es6": "^1.1.5",
    "inline-style-prefixer": …

我试图将类型为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。

当我在 TypeScript 中使用 React 时，我通常会创建一个 ES6 类来定义一个组件，如下所示：

import * as React from 'react';

interface TextProps { text: string; }

export class Panel extends React.Component<TextProps, any> {
    constructor(props: TextProps) {
        super(props);
    }
    render() {
        return <div className="panel">{this.props.text}</div>;
    }
}

export class Label extends React.Component<TextProps, any> {
    constructor(props: TextProps) {
        super(props);
    }
    render() {
        return <span className="label">{this.props.text}</span>;
    }
}

我想做的是创建一个可以接受 aPanel或 a 的类型Label。

我尝试了以下方法：

type TextComp = React.Component<TextProps, any>;

function create(component: TextComp, text: string) {
    return React.createElement(component, { …