Javascript React：在TS组件中使用ES6组件：TS2605:JSX元素类型'；xxx和x27；不是JSX元素的构造函数

我想在另一个Typescript组件中使用ES6 React组件

ES6组件：

class ModelViewer extends Component {
  constructor(props, context) {
    super(props, context);
    //...
  }
// ...
}
export default ModelViewer;

import * as ReactDOM from "react-dom";
import * as React from "react";
import ModelViewer from "./model_viewer/ModelViewer";

export class Viewer extends React.Component<any, any> {
    render() {
        return (
                <div>
                    <ModelViewer />
                </div>
        );
    }
}

我的TS组件：

class ModelViewer extends Component {
  constructor(props, context) {
    super(props, context);
    //...
  }
// ...
}
export default ModelViewer;

import * as ReactDOM from "react-dom";
import * as React from "react";
import ModelViewer from "./model_viewer/ModelViewer";

export class Viewer extends React.Component<any, any> {
    render() {
        return (
                <div>
                    <ModelViewer />
                </div>
        );
    }
}

现在我收到了错误：JSX元素类型“ModelViewer”不是JSX元素的构造函数。

---

尽管设置了

“allowJS”：true

，我是否仍需要提供打字？我尝试了不同的导入方法，但没有区别。

作为一种蛮力方法，我使用自定义键入文件满足了Typescript编译器的要求

// typings/custom.d.ts
declare module "*";

并告诉我的tsconfig.json中的编译器读取我的自定义键入：

// tsconfig.json
{
    "compilerOptions": {
        "module": "commonjs",
        "target": "es5",
        "noImplicitAny": false,
        "removeComments": true,
        "sourceMap": true,
        "allowJs": true,
        "watch": true,
        "outDir": "./dist/",
        "jsx": "react",
        "experimentalDecorators": true,
        "allowSyntheticDefaultImports": true,
        "typeRoots": [
             "./typings",
             "node_modules/@types"
         ]
    }
}

---

完整错误是App.tsx（11,17）：错误TS2605:JSX元素类型“ModelViewer”不是JSX元素的构造函数。类型“ModelViewer”中缺少属性“setState”。我认为TSC不理解

扩展组件

。。。尝试从ES6组件中的“react”导入{Component}。我还注意到您的模型查看器类中缺少“react.Component”。除此之外，只要导入路径正确，您就不应该再收到与“非构造函数”相关的错误。您找到解决此问题的方法了吗？我也有同样的问题