如何将React.lazy用于模块的组件？

Question

我正在使用名为“ @ toast-ui / react-editor”的npm软件包。 它包括一个“查看器” React组件。 我可以使用：

const Viewer = require("@toast-ui/react-editor").Viewer

但这大大增加了捆绑包的大小。 因此，我想通过使用React.lazy在需要的时候延迟加载它。 我将在组件内部使用它：

<Viewer {...props} />

但是我不知道如何去做。

我尝试过这种方法，但是没有用。

const Lazy = React.lazy(() => import(require("@toast-ui/react-editor"))).Viewer;

我真的很想知道怎么做。

Answer 1

由于Viewer不是默认组件，因此它不像删除require那样简单（尽管甚至不需要）。

您需要动态导入它，然后将模块作为默认模块返回（ 因为这是lazy期望的，并且只能使用 ）。

const Viewer = lazy(() =>
  import("@toast-ui/react-editor").then(module => {
    return { default: module.Viewer };
  })
);