reactjs - 将 React.lazy 与 TypeScript 一起使用
问题描述
我正在尝试在我的 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 })),
);
推荐阅读
- python - Python多串口减慢Linux上的USB速度
- firebase - 是否可以使用安全规则仅授予用户访问在 Firestore 中以其 uid 命名的文档的权限?
- javascript - JavaScript Chart.JS - 将图表保持在两行中,而不是将所有内容堆叠成一列
- java - 无法在appium上运行基本程序
- java - Selenium Java:侧栏菜单导航->无法选择无序列表菜单项
- r - 从使用 2 个不同几何图形创建的 ggplot 图例中删除某些值
- java - 从命令提示符运行时,LeanFT 无法找到窗口或屏幕 - Terminal Emulator IBM Application
- android - 如何从 NavigationView 向片段添加选项菜单
- regex - 特定字符串的正则表达式,后跟一个数字
- jackson - GSON有没有办法将空和缺失的属性引入GSON中的“”并将“”/空返回到缺失的属性?