reactjs - 将 React.lazy 与 TypeScript 结合使用

Question

我正在尝试在我的 TypeScript React 应用程序中使用 React.lazy 进行代码拆分。

我所做的就是改变那条线:

import {ScreensProductList} from "./screens/Products/List";

到这一行:

const ScreensProductList = lazy(() => import('./screens/Products/List'));

但是 import('./screens/Products/List') 部分触发了 TypeScript 错误，指出:

Type error: Type 'Promise<typeof import("/Users/johannesklauss/Documents/Development/ay-coding-challenge/src/screens/Products/List")>' is not assignable to type 'Promise<{ default: ComponentType<any>; }>'.
  Property 'default' is missing in type 'typeof import("/Users/johannesklauss/Documents/Development/ay-coding-challenge/src/screens/Products/List")' but required in type '{ default: ComponentType<any>; }'.

我不太确定我应该在这里做什么才能让它工作。

Answer 1

您应该从 ./screens/Products/list 中执行 export default class {...} 而不是 export class ScreensProductList {...} 。

或者，您也可以:

const ScreensProductList = lazy(() =>
  import('./screens/Products/List')
    .then(({ ScreensProductList }) => ({ default: ScreensProductList })),
);