将React.lazy与TypeScript一起使用

  • Z时代
  • 2024-01-10
  • 分类：问答

我试图在我的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>; }'.

我不太确定我应该在这里做什么才能使其正常工作。

回答：

您应该export default class {...}从而./screens/Products/list不是从开始export class

ScreensProductList {...}。

或者，您也可以执行以下操作：

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

以上是 将React.lazy与TypeScript一起使用 的全部内容， 来源链接： utcz.com/qa/412090.html

回到顶部