试图弄清楚JSX.Element的定义

Question

我正试图在React应用程序中使用JSX.Element。不过编译器很不高兴。

我有两个文件Main.tsx和EmployeeMask.js。出于某种原因，我不确定我不能在其JSX形式<EmployeeMask />中使用EmployeeMask，因为它不被理解为JSX组件。

这是我的Main.tsx文件：

export interface MainProps {}
export interface MainState {}
export class Main extends React.Component<MainProps, MainState> {
public constructor(props: any) {
super(props);
}
private maskChooser(): JSX.Element {
return <EmployeeMask />;
}
public render() {
return <div>
{this.maskChooser()}
</div>;
}
}

这是我的EmployeeMask.js文件：

import React from 'react';
export class EmployeeMask extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
EmployeeMask
</div>
)
}
}

编译器告诉我以下内容：

(alias) class EmployeeMask
import EmployeeMask
'EmployeeMask' cannot be used as a JSX component.
Its instance type 'EmployeeMask' is not a valid JSX element.
Type 'EmployeeMask' is missing the following properties from type 'ElementClass': context, setState, forceUpdate, props, refsts(2786)

我已经尝试添加export default EmployeeMask;，但这并没有改变任何内容。

为什么编译器不将其识别为JSX.Element？

Answer 1

您似乎在调用<EmployeeMask />，但导出组件的名称是EmployeeMask2，这意味着它应该像<EmployeeMask2 />一样被调用。

这是因为它是一个常规导出(export class而不是export default class(，所以在导入它时，必须使用类似import {EmployeeMask2} from '<path>/EmployeeMask.js'的东西。

如果你使用默认导出，你可以在文件中随意调用它，比如：

import Whatever from '<path>/EmployeeMask.js'

Answer 2

我得到了答案，想把它发布在这里，以防有人遇到同样的问题。我在网上找到了这个TypeScript到JavaScript的转换器，我可以在其中将一个正在工作的TypeScript类转换为JavaScript，以便进行比较并找出以前的问题所在。

将结果与我的结果进行比较表明导入是问题所在。

import React from 'react';

而不是

import * as React from 'react';

通过添加"*作为"；解决了问题并使类可用。