React-TypeScript:如何导入组件?

San*_*dey 6 typescript reactjs

下面是我的反应组件结构(使用 TypeScript):

-App.tsx

  -NewRequestForm.tsx

    -EmployeeInfo.tsx

    -AssetInfo.tsx
Run Code Online (Sandbox Code Playgroud)

我试图在 NewRequestForm 中导入 EmployeeInfo 和 AssetInfo,但是在使用 import 语句时两个组件都不可见,但我可以看到 Prop & States 接口。

在此处输入图片说明

请建议如何在我的 NewFormRequest.tsx 中导入子组件

AssetInfo.tsx(child1)

import * as React from 'react';

export interface AssetInfoProps {}
export interface AssetInfoState {}

export default class AssetInfo extends React.Component<AssetInfoProps, 
AssetInfoState> {
  constructor(props: AssetInfoProps) {
    super(props);

    this.state = {};
  }

  public render() {
    return <div />;
  }
}
Run Code Online (Sandbox Code Playgroud)

EmployeeInfo.tsx(Child2)

import * as React from 'react';

export interface EmployeeInfoProps {}
export interface EmployeeInfoState {}

export default class EmployeeInfo extends React.Component<EmployeeInfoProps, 
EmployeeInfoState> {
  constructor(props: EmployeeInfoProps) {
    super(props);

    this.state = {};
  }

  public render() {
    return <div />;
  }
}
Run Code Online (Sandbox Code Playgroud)

NewRequestForm.tsx(父)

import * as React from 'react';
import {} from './EmployeeInfo';
import {} from './AssetInfo';

export interface NewRequestFormProps {}

export default class NewRequestForm extends 
React.Component<NewRequestFormProps, any> {
  public render() {
    return <div />;
  }
}
Run Code Online (Sandbox Code Playgroud)

Mur*_*göz 5

去掉default导出关键字EmployeeInfo

  • @SandeepNandey 您可以在没有“{}”的情况下导入默认导出,但您可以在此处阅读更多内容 /sf/answers/2331524121/ (3认同)