时间戳

首页 > 解决方案 > React .- JSX 中的 reduce() 不渲染

reactjs - React .- JSX 中的 reduce() 不渲染

问题描述

我在渲染方法中有以下代码：

return (<select>
{[...Array(24).keys()].reduce((acc, item) => `${acc} <option value="${item}">${item}<option>`, '')}
</select>);

acc 变量包含所有选项，reduce() 函数具有隐式返回但不显示任何选项。这背后的解释是什么？

我能够使用 .map() 来完成这项工作，我只是好奇上面示例中的 reduce 函数有什么问题。

<select>
{[...Array(24).keys()].map(hour => {
return <option value={hour} key={hour}>{hour}</option>
})
}
</select>

谢谢

标签： reactjsjsx

解决方案

如果您查看检查器中的输出，您将看到您有一个<select>包含文本节点的内容。这是因为您正在减速器中构建一个字符串。React 将字符串呈现为文本，无论其内容如何。

如果您想使用reduce，那么一种选择是执行以下操作：

ReactDOM.render(<select>
{[...Array(24).keys()].reduce((acc, item, index) => [
  ...acc, 
  <option key={index} value={item}>{item}</option>
], [])}
</select>, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

这是因为<option>创建了一个 HTML 元素，而不是一个字符串。reducer 返回一个元素数组，这些元素可以通过 React 呈现为 HTML。

推荐阅读