react-loadable import dynamicaly 以组件为属性的对象答案

【问题标题】：react-loadable import dynamicaly object with components as propertiesreact-loadable import dynamicaly 以组件为属性的对象
【发布时间】：2018-02-05 18:18:26
【问题描述】：

我有一个导出所有 SVG 组件的索引文件：

import Twitter from './Twitter';
import Upload from './Upload';
import Cloud from './Cloud';
import Share from './Share';
import Eye from './Eye';
import Trash from './Trash';
import Search from './Search';

export {
  Facebook,
  Twitter,
  Upload,
  Cloud,
  Share,
  Eye,
  Trash,
  Search,
};

然后在应用程序中，我会像这样使用它们：

import * as Icons from './index.js';

<Icons.Twitter />
...
<Icons.Search />

因为我有很多这些图标，我想用react-lodable 异步加载它们。

我试过了：

import React from 'react';
import Loadable from 'react-loadable';
import PulsingCircleLoader from '../PulsingCircleLoader';

const Icons = Loadable({
  loader: () => import(/* webpackChunkName: "icons" */ './index'),
  loading: () => <PulsingCircleLoader isLoading />,
});

export default Icons;

但这给了我一个错误：

warning.js?6327:33 警告：React.createElement：类型无效 -- 期望一个字符串（对于内置组件）或一个类/函数（对于复合组件）但得到：未定义。您可能忘记导出你的组件来自它定义的文件，或者你可能混合了设置默认和命名导入

这可能是因为Icons.Twitter 在某些时候是一个PulsingCircleLoader，没有静态Twitter 属性。

我该如何解决这个问题？

【问题讨论】：

标签： javascript reactjs dynamic-import react-loadable

【解决方案1】：

发生这种情况是因为您正在使用 export { ... } 语句导入图标。但是当你使用像这样import(/* webpackChunkName: "icons" */ './index'),这样的调用时，./index文件必须有export default语句

【讨论】：

我不认为是这样，因为在动态加载 Icons 之前，react-loadable 将返回没有静态属性的 PulsingCircleLoader。如果我错了，请在代码沙箱上准备一些示例。