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

Question

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

先感谢您

Answer 1

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

import SplitPane from "react-split-pane"