JSX元素类型[外部模块]没有任何构造或调用签名

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JSX元素类型[外部模块]没有任何构造或调用签名相关的知识,希望对你有一定的参考价值。

当试图运行一些简单版本的Microsoft Typescript-React入门教程:https://github.com/Microsoft/TypeScript-React-Starter我在导入的模块上遇到以下错误:

(31,30): JSX element type 'SplitPane' does not have any construct or call signatures.

我已经在网上查了一下,并且我有同样的错误有几个问题:What does the error "JSX element type '...' does not have any construct or call signatures" mean?https://github.com/Microsoft/TypeScript/issues/28631但它们无法帮助我理解我的错误在哪里,因为我使用的是外部模块。

为了更清楚,我将添加一些代码。我使用的文件与使用npx create-react-app my-app --scripts-version=react-scripts-ts时输出的文件相同,只是编辑了package.json,并创建了SplittedPane.tsx

这是文件SplittedPane.tsx:

import * as React from "react";
import * as SplitPane from "react-split-pane"

interface Props {
    numberPanes: number;
}

interface State {
    numberPanes: number;
}

class SplittedPane extends React.Component<Props, State> {
    constructor(props: Props) {
        super(props);
        this.state ={
            numberPanes: props.numberPanes || 1
        };
    }

    onIncrement = () => this.updatePanes(this.state.numberPanes + 1);
    onDecrement = () => this.updatePanes(this.state.numberPanes - 1);

    render() {
        if (this.state.numberPanes === 1) {
            return (
                <div className="globalView">
                    <button onClick={this.onIncrement}>+</button>
                    <div className="panesView">                        
                            <SplitPane split="horizontal" defaultSize="50%">
                                <h1>West</h1>
                                <h1>East</h1>
                            </SplitPane>

                    </div>
                </div>
            )
        } else {
            throw new Error('The number of Panes is not supported');
        }
    }

    updatePanes(numberPanes: number) {
        this.setState({numberPanes});
    }
}

export default SplittedPane;

这就是package.json:

{
  "name": "react-typescript-github-microsoft-tutorial",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-scripts-ts": "3.1.0",
    "styled-components":"^4.2.0",
    "react-split-pane":"^0.1.87"
  },
  "scripts": {
    "start": "react-scripts-ts start",
    "build": "react-scripts-ts build",
    "test": "react-scripts-ts test --env=jsdom",
    "eject": "react-scripts-ts eject"
  },
  "devDependencies": {
    "@types/jest": "^24.0.11",
    "@types/node": "^11.13.7",
    "@types/react": "^16.8.14",
    "@types/react-dom": "^16.8.4",
    "typescript": "^3.4.5"
  }
}

我希望这个代码创建两个窗格(拆分窗口),一旦我将这个SplittedPane包含到index.tsx文件中。但是,它与上述错误一起崩溃:

(31,30):JSX元素类型'SplitPane'没有任何构造或调用签名。

由于我正在使用这个外部模块'react-split-pane',我该如何克服这个问题?我看到类似错误的解决方案似乎不是针对外部模块。

先感谢您

答案

react-split-pane使用单个命名的默认导出,应该像导入一样导入

import SplitPane from "react-split-pane"

以上是关于JSX元素类型[外部模块]没有任何构造或调用签名的主要内容,如果未能解决你的问题,请参考以下文章

JSX 元素类型“...”没有任何构造或调用签名

TypeScript、react-router 和 jsx:JSX 元素类型 'Route' 没有任何构造或调用签名

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

打字稿:未找到导出/JSX 元素类型没有任何构造或调用签名

在 tsx 编译错误中导入 jsx 文件

route.component 没有任何构造或调用签名 - 使用 TypeScript 的 React Router