使用html的Es6地圖數組在JSX中不起作用？

Question

我在渲染像常量arr = ["james","john"];

功能和返回功能的常量我做

<select> 
    arr.map(item => 
    <option>item</option> 
    ) 
</select> 

我在輸出中看到的是項目，該數組的不是值。我錯過了什麼嗎？我想填充數組值作爲選項。

Answer 1

JSX元素內部的內容通常會被解釋爲「文本」，因此React將arr.map(…)視爲<select>元素的文字內容。

（<option>item</option>因此被簡單地視爲<select>的文字子元素;您的瀏覽器可能會忽略外圍文本，這就是爲什麼您只能在列表中看到「項目」）。

當你，而不是希望它是一個JavaScript表達式處理，只需將它放在大括號（如在作出反應的快速入門指南的「Introducing JSX」頁說明）：

<select> 
    {arr.map(item => 
    <option>{item}</option> 
)} 
</select>