如何在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}/> 
    }) 
}