0

我有一个导出所有 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属性。

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

4

1 回答 1

0

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

于 2019-01-12T09:37:19.307 回答