带有html的Es6地图数组在JSX中不起作用？

Question

我有像const这样的const函数 arr = ["james","john"];

在我做的返回功能

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

我在输出中看到的是item,而不是数组的值.我错过了什么吗？我想将数组值填充为选项.

Answer 1

JSX元素中的内容通常会被解释为"text",因此React将其arr.map(…)视为<select>元素的文字内容.

(<option>item</option>因此被简单地视为文字子元素<select>;您的浏览器可能忽略了周围文本,这就是您只在列表中看到"项目"的原因).

当您希望将其视为JavaScript表达式时,只需将其包装在大括号中(如React快速入门指南的" 介绍JSX "页面中所述):

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