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

【问题标题】：Es6 map array with html doesn't work in JSX?带有 html 的 Es6 地图数组在 JSX 中不起作用？
【发布时间】：2017-02-12 05:52:50
【问题描述】：

我在渲染函数中有一个 const，例如 const arr = ["james","john"];

在返回函数中我这样做

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

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

【问题讨论】：

【解决方案1】：

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

（因此<option>item</option> 被简单地视为<select> 的文字子元素；您的浏览器可能会忽略周围的文本，这就是为什么您只会在列表中看到“item”）。

当您希望将其视为 JavaScript 表达式时，只需将其包裹在大括号中（如 React 快速入门指南的“Introducing JSX”页面中所述）：

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

【讨论】：