Реагировать .- Reduce () в JSX не рендеринга

Question

У меня есть следующий код в методе рендеринга:

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

переменная acc содержит все опции, а функция redu () имеет неявный возврат, но никакие опции не отображаются. Что за этим стоит?

Мне удалось сделать это с помощью .map (), мне просто любопытно, в чем проблема с функцией Reduce в приведенном выше примере.

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

Спасибо

Answer 1

Если вы посмотрите на вывод в инспекторе, вы увидите, что у вас есть <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, а не строку.Редуктор возвращает массив элементов, которые могут быть отображены в HTML как React.