在React中导入多个文件

阿隆·卡默(Aron Karmer):

我正在为我的React项目使用create-react-app。它已将webpack配置为导入图像。我希望将多个图像(例如10个)从图像文件夹导入到组件中。最简单的方法是添加多个import语句,例如-

import Img0 from '../images/0.png';
import Img1 from '../images/1.png';
import Img2 from '../images/2.png';
import Img3 from '../images/3.png';
import Img4 from '../images/4.png';
import Img5 from '../images/5.png';
import Img6 from '../images/6.png';
...

当我们要导入多个文件时,以上代码不是一个好的选择。有没有办法在循环中添加导入语句?我尝试添加for循环,但无法修改变量Img0,Img1等(使用ES6``无效,因为它将变量转换为字符串)

cs95:

您不能使用单个import语句,但是可以这样做:

function importAll(r) {
    let images = {};
    r.keys().map((item, index) => { images[item.replace('./', '')] = r(item); });
    return images;
}

const images = importAll(require.context('./images', false, '/\.png/'));

<img src={images['0.png']} />

来源

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章