如何使用单个导出从 React 中的 JS 文件中导出所有导入的图像？答案

【问题标题】：How can I export all imported images from a JS file in React using a single export?如何使用单个导出从 React 中的 JS 文件中导出所有导入的图像？
【发布时间】：2020-12-31 02:11:06
【问题描述】：

我正在用 React 创建一个纸牌游戏。我有一个 Card 组件，它根据卡片的状态、数字等将卡片呈现到屏幕上。在 Card.js 的顶部是一系列图像源的导入，如下所示： import cardFrontTexture from '../assets/card_front.png'

我有很多这样的导入，所以我想我会将它们全部移到另一个 JS 文件中，并将其命名为 CardImages.js。我将Card.js 改为导入CardImages.js。

但我无法弄清楚如何导出CardImages.js 中的所有导入图像

本质上，有没有办法将所有导入的所有内容导出到一个文件中，这样我就不必在Card.js 中按名称单独导入所有内容？如果可能，我想避免使用import { image1, image2, image3... } from './CardImages';。

// Card,js
...
import * as cardImages from './CardImages';
...

export class Card extends Component {
    render() {
        return (
            <div>
                <img
                    onClick={this.handleClick}
                    className=""
                    src={ cardImages.image1 } // This is what I figured would work
                />
                ...
            </div>
        );
    }
}

// CardImages.js
import image1 from '../../assets/image_1.png';
import image2 from '../../assets/image_2.png';
import image3 from '../../assets/image_3.png';
...

export ? // Not sure what to put here

【问题讨论】：

这能回答你的问题吗？ Importing multiple files in react
一半。我现在明白CardImages.js 中要更改的内容。但是是否可以像这样从CardImages.js 导入所有内容：import * as cardImages from './CardImages';？
原来我可以！感谢您的帮助:)
顺便说一句，我不认为这是一个好习惯。为什么不直接在Card.js 上导入它。因为你仍然在CardImages.js 上一个接一个导入所有图像
我之前已经看到其他 Web 开发人员这样做是为了减少其组件文件中的混乱。我想它在这里用处不大，但如果我想在另一个组件上重用卡片图像，我可以只包含CardImages，而不是复制粘贴一长串包含。但在这种情况下你是对的——它没有多大用处，因为Card 是唯一使用CardImages 的组件。这对我来说更像是一个练习，以更好地了解进出口。

标签： javascript reactjs

【解决方案1】：

我想通了。感谢 Alif 为我指明了正确的方向。

我把CardImages.js改成了这个：

export const image1 = require('../../assets/image_1.png');
export const image2 = require('../../assets/image_2.png');
export const image3 = require('../../assets/image_3.png');
...

我离开了Card.js，如原始问题所示。我能够使用 import * as cardImages from './CardImages.js'; 并避免通过其名称导入每个导出。

【讨论】：