在 TypeScript 中使用 React.lazy

IT技术 reactjs typescript
2021-04-15 20:49:54

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

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

5个回答

你应该export default class {...}从而./screens/Products/list不是export class ScreensProductList {...}.

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

const ScreensProductList = lazy(() =>
  import('./screens/Products/List')
    .then(({ ScreensProductList }) => ({ default: ScreensProductList })),
);
这很完美。我将如何从module中延迟加载多个无默认导出？我是否必须为每次导出执行第二种方法？
2021-05-30 20:49:54
@JohannesKlauß，是的，lazy() 只会渲染一个组件，因此您必须为每个需要的组件重复包装
2021-05-31 20:49:54
真的很丑 特别是因为每个module只能有一个默认值。
2021-06-09 20:49:54
应该为 TypeScript 添加哪些类型？
2021-06-12 20:49:54
@JamesHancock 你可以看看我的回答，react-lazily 解决每个module的多个组件 const { One, Two, Three } = lazily(() => import('./module'))
2021-06-19 20:49:54

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

export default ScreensProductList;

其次是将导入代码更改为

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

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

import { lazily } from 'react-lazily';
const { ScreensProductList } = lazily(() => import('./screens/Products/List'));

其他方式 

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") )

这是正确的语法。它也适用于 Webstorm IDE（此处显示的其他语法仍显示警告）

const ScreensProductList = React.lazy(() => import("./screens/Products/List").then(({default : 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})))
其它你可能感兴趣的问题
上一篇从字符串创建 React 类的实例 下一篇带有 React 的 Google Analytics 4