Javascript 使用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);
});

不过，我从一些资料中了解到，应该避免使用导出默认值

---

有没有解决这个问题的好办法？如果我提供的信息太少，请告知。谢谢：）

我不知道你为什么认为应该避免使用默认导出：）我认为这只是一些团队的惯例。因此添加

导出默认懒散区是处理此问题的有效方法。无论如何，您不会有太多的懒惰模块

这就是为什么来自的解决方案也可以在您将默认导出放入其自己的文件中的情况下工作

另一种建议的方法是更改导入代码以将其转换为默认内联：

const LazyArea=React.lazy（（）=>
导入（“./惰性区域”）。然后（（模块）=>({
默认值：module.LazyArea，
}))
);

但这对我来说似乎太多了：）所以我创造了一个符合你期望的

例子
const{LazyArea}=lazly（（）=>import（'./LazyArea'）；

它只是
React.lazy
的一个小包装，但它允许您拥有一个非常直接的代码，如下所示：

import { lazily } from 'react-lazily';
const { Component1, Component2 } = lazily(() => import('./Components'))

可悲的事实是React.lazy在当前状态下仅用于默认导出。不管你怎么做，都是假装我们有一个默认的导出。在文档中提到的被认为是目前最好的黑客解决方法（）好吧，我想使用默认导出将不得不这样做。谢谢：）好的第一个问题！
const LazyArea = connect(
mapStateToProps,
mapDispatchToProps
)(LazyArea);

export default LazyArea;

import { lazily } from 'react-lazily';
const { Component1, Component2 } = lazily(() => import('./Components'))