在TypeScript中使用JS React组件：JSX元素类型'MyComponent'不是JSX元素的构造函数

Question

我正在使用一个使用React框架的JavaScript旧项目。我们定义了一些React组件，希望在一个完全不同的TypeScript React项目中重复使用。

JS React组件在controls.jsx文件中定义，外观如下：

export class MyComponent extends React.Component {
  render() {
    return <h1>Hi from MyComponent! Message provided: {this.props.message}</h1>;
  }
}

在我的TypeScript React项目中，我试图像这样使用它：

import * as React from "react";
import * as ReactDOM from "react-dom";
import { MyComponent } from "../JavaScriptProject/controls";

ReactDOM.render(
  <MyComponent message="some nice message"/>,
    document.getElementById("documents-tree")
);

但是我收到以下错误：

错误消息说：

JSX元素类型'MyComponent'不是JSX的构造函数元素。类型“ MyComponent”缺少以下属性从类型'ElementClass'中获取：context，setState，forceUpdate，props和2more.ts（2605）JSX元素类不支持属性，因为它没有“道具”属性。ts（2607）

我已经尝试过使用this问题中描述的自定义类型文件的解决方案，但是它什么都没有改变。

我了解JS组件具有TypeScript所需的一些强类型属性，但是在我的tsconfig.json中，我将allowJs

设置为true：

{
  "compilerOptions": {
    "allowJs": true,
    "baseUrl": ".",
    "experimentalDecorators": true,
    "jsx": "react",
    "noEmitOnError": true,
    "outDir": "lib",
    "sourceMap": true,
    "target": "es5",
    "lib": [
      "es2015",
      "dom"
    ]
  },
  "exclude": [
    "node_modules",
    "dist",
    "lib",
    "lib-amd"
  ]
}
所以我希望它能起作用...

感谢您的帮助

我正在使用一个使用React框架的JavaScript旧项目。我们定义了一些React组件，我想在一个完全不同的TypeScript React项目中重复使用。 JS ...

Answer 1

跟随此tutorial