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

【问题标题】：JSX element type [External Module] does not have any construct or call signaturesJSX 元素类型 [外部模块] 没有任何构造或调用签名
【发布时间】：2019-09-13 18:02:40
【问题描述】：

在尝试运行一些简单版本的 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”，我该如何解决这个问题？我看到的类似错误的解决方案似乎不是针对外部模块的。

提前谢谢你

【问题讨论】：

标签： reactjs typescript node-modules

【解决方案1】：

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

import SplitPane from "react-split-pane"

【讨论】：