从多个类导出的 js 中进行 react-loadable 导入

Posted 2023-02-19

【中文标题】从多个类导出的 js 中进行 react-loadable 导入

【英文标题】：react-loadable import from multiple class exported js

【发布时间】：2018-10-12 17:59:53

【问题描述】：

如何从react-loadable中导出的多个类js文件中导入。 我正在尝试使用Home.js 中的react-loadable 从MyButton.js 导入CustomButton。这是我知道的唯一方法，行不通。

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
);

请帮忙。提前致谢。

【参考方案1】：

我知道这已经得到解答，但我想出了一种方法来让一个变量包含所有命名的导出。见下文。

    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/>;
    
  )

并与 react-router 一起使用...

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

以及任何其他命名的导出

【参考方案2】：

我找到了解决方案

react-loadable documentation

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

它的工作。

【参考方案3】：

我可以这样做：

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

但是，我无法在一个变量包含所有其他导出的情况下得到它。