Как зацикливаться внутри React JSX

Как выполнить цикл в компоненте React JSX

Если у вас есть набор элементов, которые необходимо выполнить в цикле для генерации партиала JSX, вы можете создать цикл, а затем добавить JSX в массив:

const elements = [] //..some array

const items = []
for (const [index, value] of elements.entries()) {
items.push(<Element key={index} />)
}

Теперь при рендеринге JSX вы можете встроитьitemsмассив, заключив его в фигурные скобки:

render() {
  const elements = ['one', 'two', 'three'];
const items = []
for (const [index, value] of elements.entries()) {
items.push(<li key={index}>{value}</li>)
}
return (
<div>
{items}
</div>
)
}

Вы можете сделать то же самое прямо в JSX, используяmapвместо цикла for:

render: function() {
  const elements = ['one', 'two', 'three'];
  return (
    <ul>
      {elements.map((value, index) => {
        return <li key={index}>{value}</li>
      })}
    </ul>
  )
}

Скачать мою бесплатнуюСправочник по React

Как зацикливаться внутри React JSX

Как выполнить цикл в компоненте React JSX

Больше руководств по реакции: