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

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'

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

how to export all files in a directory so that i can use them with dot operator?

import

module

export

gif

reactjs