Реактивно загружаемый импорт из нескольких классов экспортируемых js

Question

Как импортировать из нескольких экспортируемых классов js файл в react-loadable,
Я пытаюсь импортировать CustomButton от MyButton.js с помощью react-loadable в Home.js, Это единственный способ, которым я знаю, это не работает.

MyButton.js

import {
  CustomButton,
  BUTTON_STYLE,
  BUTTON_TYPE,
  BUTTON_SIZE,
  BUTTON_ALIGN,
  COLOR
} from './buttons';
module.exports = {
  CustomButton,
  BUTTON_STYLE,
  BUTTON_TYPE,
  BUTTON_SIZE,
  BUTTON_ALIGN,
  COLOR
}

Home.js

const AsyncButton = Loadable({
  loader: () => import('../../button/MyButton'),
  loading: Loading
});

Пожалуйста помоги. Заранее спасибо.

Answer 1

Я смог сделать это так:

const AsyncButton = Loadable({
  loader: () => import('../../button/MyButton').then(module => module.CustomButton),
  loading: Loading
});

Тем не менее, я не могу получить его, где одна переменная содержит все другие экспорты.

Answer 2

Я нашел решение от

реактивно-загружаемая документация

Loadable({
  loader: () => import('./my-component'),
  render(loaded, props) {
    let Component = loaded.namedExport;
    return <Component {...props}/>;
  }
});

Работает.

Answer 3

Я знаю, что это ответ, но я нашел способ получить одну переменную, которая будет содержать все именованные экспорты. Увидеть ниже.

    AsyncSubSites = namedComponent => Loadable({
    loader: () =>
      import( /*webpackChunkName: "SubSites"*/ "./SubSites/SubSites"),
    loading: () => <Loading/>, //loader/spinner etc.
    modules: ["SubSites"],
    render(loaded, props) {
      let Component = loaded[namedComponent];
      return <Component {...props}/>;
    }
  })

и используется с реакции-маршрутизатором как...

<Route path="/:slug" exact component={AsyncSubSites('Membership')} />
<Route path="/:slug" exact component={AsyncSubSites('About')} />

и все остальное по имени экспорт