从多个类导出的js的可加载导入

Question

如何从在js中导出的多个类导入react-loadable文件。

我正在尝试使用CustomButton中的react-loadable从MyButton.js导入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

我找到了一个解决办法

react可加载文档

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

起作用了。

Answer 3

我知道这是个答案，但我想出了一种方法来获得一个变量来包含所有名为exports的变量。见下文。

    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')} />

不管是什么名字