Question

我有一个索引文件，我在其中导出所有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属性。

我怎样才能解决这个问题？

Answer 1

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

使用组件作为属性的react-loadable import dynamicaly对象

1 个答案: