如何导出目录中的所有文件以便我可以将它们与点运算符一起使用？

Question

我有一个包含很多 gif 文件的目录。 为了在react中使用这些文件，我必须单独导入它们并在img标签中使用它们：

import Cube from '../gifs/Cube.gif'
<img src={Cube} />

如果 gif 文件不是那么大，我可以创建一个index.js文件并导入所有文件并导出它们：

import BeanEater from './BeanEater.gif'
import Cube from './Cube.gif'
import Eclipse from './Eclipse.gif'
import Gear from './Gear.gif'
import Infinity from './Infinity. gif'
import Reload from './Reload.gif'
import Spinner from './Spinner.gif'

export default{
    BeanEater,
    Cube,
    Eclipse,
    Gear,
    Infinity,
    Reload,
    Spinner
}

我在 src/gifs 文件夹中有一个 index.js，用于导出 src/gifs 文件夹中的所有 gif 文件。 我想导入 index.js 文件中的所有 gif 文件。 如果我这样做：

import * as gifs from '.'

并以这种方式导出它们：

export default gifs

我无法在其他组件中单独访问 gif 文件：

import gifs from './gifs'
<img src={gifs.Cube} /> // doesn't show anything

如何处理这种情况？ （如何在 index.js 中导入 gif 文件以及如何导出它们，以便我可以使用点运算符单独访问其他组件中的文件）

Answer 1

尝试这个

export default{
    BeanEater,
    Cube,
    Eclipse,
    Gear,
    Infinity,
    Reload,
    Spinner
}

至

export{
    BeanEater,
    Cube,
    Eclipse,
    Gear,
    Infinity,
    Reload,
    Spinner
}

并使用相同的导入

import * as gifs from '../gifs'