如何在React.js中使用使用字符串數組的變量名稱

Question

我想要做的是去除下面的重複代碼。

import icon1 from './images/abc.png' 
import icon2 from './images/xyz.png' 
import icon3 from './images/pqr.png' 
import icon4 from './images/stu.png' 
... 

<img src={icon1}/> 
<img src={icon2}/> 
<img src={icon3}/> 
<img src={icon4}/> 
... 

我想重寫上面的代碼，使用循環或映射函數，就像下面的概念。

let array = [1,2,3,4]; 

{array.map(v => 
    <img src={icon + v} /> 
);} 

當然，它不起作用。在使用React.js時，如何使用字符串連接來使用變量？

Answer 1

不知道的最好的解決辦法，但是這一個會工作。

---

代替在陣列中存儲1,2,3,4，存儲這樣的圖像名稱：

let imgArr = ['abc', 'xyz', 'stu']; 

當使用require：

{ 
    imgArr.map(v => 
     <img src={require(`./images/${v}.png`)} /> 
    ); 
} 

注：如果您正在使用此功能，則無需導入頂部的所有圖像。

Answer 2

創建一個變量：

let ICONS = { 
    1: icon1, 
    2: icon2, 
    3: icon3, 
    4: icon4 
} 

然後訪問它的字段

{array.map(v => 
    <img src={ICONS[v]} /> 
);} 

Answer 3

你當然可以做到這一點

const icons = [ { id: 1, src: './images/abc.png'}, 
{ id: 2, src: './images/def.png'} ] // add more 

{ icons.map((item) => { 
    <img key={item.id} src={item.src}/> 
    }) 
}