使用 ReactJS 映射的 json 文件的 img 標簽中 src 屬性內的正確語法是什么？

Question

我想將一些圖像從本地 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}替換每個名稱並顯示圖像的語法是什么？

Answer 1

您可以使用括號表示法來動態訪問對象屬性。 它看起來像這樣：

const obj = { foo: 123, bar: 321 }

const propName = 'foo'
const prop = obj[propName]

console.log(prop) // output: 123

所以在你的情況下：

<img src={item[item.slug]} />