我想將一些影像從本地 JSON 檔案匯入到我的組件中。我希望它們與我從 API 獲取的資料相匹配。
我的 JSON 檔案是：
[
{
"id": 1,
"dwarf": "/assets/races/dwarf.png",
"slug": "dwarf"
},
{
"id": 2,
"elf": "/assets/races/elf.png",
"slug": "elf"
}
]
我有這個用于映射 JSON 檔案：
{images.map((item, index) => (
<C.Image
key={index}
item={item}
>
<img src={`item.${data.slug}`} />
<img src={item.dwarf} />
</C.Image>
{data.slug}從 API 獲取并匹配我傳遞給 JSON 檔案中的每個影像的屬性名稱。當我插入時<img src={item.dwarf} />，我顯示了影像，但對所有人來說都是一樣的。當我插入時<img src={`item.${data.slug}`} />，影像不顯示，在控制臺上顯示<img src="item.dwarf"> <img src="item.elf">，而不是影像。使用{data.slug}替換每個名稱并顯示影像的語法是什么？
uj5u.com熱心網友回復：
您可以使用括號表示法來動態訪問物件屬性。它看起來像這樣：
const obj = { foo: 123, bar: 321 }
const propName = 'foo'
const prop = obj[propName]
console.log(prop) // output: 123
所以在你的情況下：
<img src={item[item.slug]} />
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/343644.html
標籤：javascript 反应 json
上一篇：Nodejs無法提取JSON值