相关疑难解决方法(0)

将React.lazy与TypeScript一起使用

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

我正在做的就是更改该行:

import {ScreensProductList} from "./screens/Products/List";
Run Code Online (Sandbox Code Playgroud)

到这行:

const ScreensProductList = lazy(() => import('./screens/Products/List'));
Run Code Online (Sandbox Code Playgroud)

但是该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>; }'.
Run Code Online (Sandbox Code Playgroud)

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

typescript reactjs

8
推荐指数
3
解决办法
2098
查看次数

用 TypeScript 和 Redux 懒惰地反应

我在将 React lazy 与我使用 TypeScript 和 Redux 的项目相结合时遇到了问题。这是我的代码:

// lazy-area.tsx
const LazyArea = ({text}: Props): JSX.Element => {
    ....
};

export const LazyArea = connect(
mapStateToProps,
mapDispatchToProps
)(LazyArea);


//Menu.tsx
import React, { lazy, Suspense } from 'react';
....
const lazyArea = lazy(() => import('./lazy-area'));

const Menu = ({
    .....
  }: Props): JSX.Element | null => {
      return (
        <Suspense fallback={LoadingView}>
            <LazyArea />
        </Suspense>
      )
    export const Menu = connect(
    mapStateToProps,
    mapDispatchToProps
    )(Menu);
});
Run Code Online (Sandbox Code Playgroud)

通过此设置,我收到一条错误消息:

Type 'Promise<typeof import("/home/user/app/lazy-area")>' is not assignable …
Run Code Online (Sandbox Code Playgroud)

javascript lazy-loading typescript reactjs

5
推荐指数
1
解决办法
630
查看次数

标签 统计

reactjs ×2

typescript ×2

javascript ×1

lazy-loading ×1