Javascript 如何在React.js中使用字符串数组使用变量名

我试图做的是删除重复代码，如下所示

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}/>
...

从“/images/abc.png”导入icon1
从“/images/xyz.png”导入icon2
从“/images/pqr.png”导入icon3
从“/images/stu.png”导入icon4
...
...

我想在概念上使用下面的循环或映射函数重写上面的代码

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

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

let数组=[1,2,3,4]；
{array.map（v=>
);}

当然，它不起作用。在使用React.js时，如何使用字符串连接使用变量？

创建一个变量：

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

然后访问它的字段

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

{array.map（v=>
);}

不确定最佳解决方案，但这一个会起作用

---

不要将1,2,3,4存储在数组中，而是像这样存储图像名称：

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

使用时：

{
imgArr.map（v=>
);
}

---

注意：如果您正在使用，则无需导入顶部的所有图像。

您当然可以这样做

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}/>
  })
}

const-icons=[{id:1，src:'./images/abc.png'}，
{id:2，src:'./images/def.png'}]//添加更多
{icons.map（（项）=>{
})
}

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}/>
  })
}