如何使用 react lazy 從 package 導入多個函數或組件

Question

我必須用 react.lazy 替換 loadable 的用法

這就是 loadable 的情況：

const loadReactIntl = () => import('react-intl');

export const intlProvider = () => Loadable({
  loader: () => loadReactIntl(),
  render(loaded, props) {
    **const { createIntl, createIntlCache, RawIntlProvider } = loaded;** // <-- this line what I'm looking for
    ... // skip rest of the code
  },
});

我正在嘗試做一些與突出顯示的行類似的事情，但使用 react.lazy 而不是 loadable，就像這樣：

const ReactIntl = lazy(() => import('react-intl');

export const getLoadableIntlProvider = (localesLoaderConfig = localeConfig) => (props) => {
  const { messages } = props;
  const { createIntl, createIntlCache, RawIntlProvider } = ReactIntl;
  ... // skip the rest of the code
};

我嘗試做這樣的事情，但是那沒有用，它一直給我例如 createIntl undefined：

const ReactIntl = lazy(() => import('react-intl').then((module) => ({ default: module.RawIntlProvider, createIntlCache: module.createIntlCache, createIntl: module.createIntl })));;

有辦法解決這個問題嗎？

Answer 1

這可能是您想要的：

const RawIntlProvider = lazy(() => import('react-intl').then((module) => ({ default: module.RawIntlProvider })));;
const createIntlCache = lazy(() => import('react-intl').then((module) => ({ default: module.createIntlCache })));;

但我不知道是否真的需要這個lazy ，因為你想加載模塊，而不是組件。