Question

我在render方法中有以下代码：

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>

谢谢

Answer 1

如果您在检查器中查看输出，您会看到您有一个reduce，其中包含一个文本节点。这是因为要在化简器中构建 string 。无论字符串内容如何，React都会将字符串呈现为文本。

如果您想使用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>

之所以有效，是因为{{1}}创建了HTML元素，而不是字符串。 reducer返回的元素数组可以由React呈现为HTML。

React .- reduce（）在JSX中不呈现

1 个答案: