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元素类型[外部模块]没有任何构造或调用签名的主要内容,如果未能解决你的问题,请参考以下文章
TypeScript、react-router 和 jsx:JSX 元素类型 'Route' 没有任何构造或调用签名