时间戳

首页 > 解决方案 > 试图弄清楚 JSX.Element 的定义

javascript - 试图弄清楚 JSX.Element 的定义

问题描述

我正在尝试JSX.Element在 React 应用程序中使用 a 。编译器虽然不高兴。

我有两个文件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?

标签： javascriptreactjsjsx

解决方案

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

发生这种情况是因为它是常规导出（export class而不是export default class），因此当您导入它时，您必须使用类似import {EmployeeMask2} from '<path>/EmployeeMask.js'.

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

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

推荐阅读