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

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

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

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

Answer 2

另一种方式

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

Answer 3

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

with(a1, range(r))

第二个是将导入代码更改为

export default ScreensProductList;

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

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

Answer 4

您可以创建一个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.lazy与TypeScript一起使用

4 个答案: