Reactjs 将React.lazy与TypeScript一起使用

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

我所做的就是改变这一行：

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

关于这一行：

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

但是

导入（'./screens/Products/List'）

部分会触发一个类型脚本错误，说明：

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>; }'.

类型错误：类型“Promise”不可分配给类型“Promise”。
属性“default”在类型“typeof import”（/Users/johannesklauss/Documents/Development/ay coding challenge/src/screens/Products/List）中缺失，但在类型“{default:ComponentType；}”中是必需的。

---

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

您应该从

/screens/Products/list

中执行

导出默认类{…}

，而不是

导出类屏幕产品列表{…}

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

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

---

您可以创建一个index.ts文件，从中可以导出所有组件，如：

export {default as YourComponentName} from "./YourComponentName";

之后，您可以使用React.lazy：

React.lazy(() => import("../components/folder-name-where-the-index-file-is-created").then(({YourComponentName}) => ({default: YourComponentName})))

另一种方式

const UsersList = () => (
  ..JSX
)

export default UsersList as React.FC;

或者在旧类组件中

class UsersList extends Component {
  render(){

  }
}


export default UsersList as React.ComponentType

并且在使用React.lazy导入时

React.lazy( ()=> import("./UsersList") )

---

一个选项是像这样在“/screens/Products/List”中添加默认导出

导出默认屏幕产品列表；

第二是将导入代码更改为

const ScreensProductList=React.lazy（（）=>
导入（“./屏幕/产品/列表”）。然后（（模块）=>({
默认值：module.ScreensProductList，
}))
);

或者，如果您不介意使用外部库，您可以：

从'react lazly'导入{lazly}；
const{ScreensProductList}=lazly（（）=>import（'./screens/Products/List'）；

这是一个完美的选择。我如何从一个模块延迟加载多个非默认导出？我必须为每个导出执行第二种方法吗？@JohannesKlauß，是的，lazy（）只渲染一个组件，因此您必须为每个需要的组件重复包装，这真的很难看。特别是因为每个模块只能有一个默认值。对于TypeScript，应该向其中添加哪些类型？@jameshanchock您可以查看我的答案，react Lazy为每个模块解决多个组件

const{1,2,3}=lazy（（）=>import（'./module'））