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

それを行うことができます