在反應中導入多個文件

Question

我正在爲我的反應項目使用create-react-app。它已經配置了用於導入圖像的webpack。我希望從圖像文件夾導入多個圖像（比如10）到一個組件中。這樣做的最簡單的方法是添加多個導入語句，例如 -

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``因爲它將變量轉換爲字符串不起作用）

Answer 1

您不能使用單個導入語句，但你可以這樣做：

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']} /> 

Source。