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

Question

我有像const arr = ["james","john"];

这样的渲染函数中的const

并在返回函数中执行

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

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

Answer 1

JSX元素中的内容通常会被解释为＆＃34; text＆＃34;，因此React会将arr.map(…)视为<select>元素的文字内容。

（<option>item</option>因此被视为<select>的文字子元素;您的浏览器可能会忽略环绕文本，这就是您在列表中只看到＆＃34; item＆＃34;的原因）。

如果您希望将其视为JavaScript表达式，只需将其包装在大括号中（如React快速入门指南的＆＃34; Introducing JSX＆＃34;页中所述） ）：

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