Looping в JSX файлы

Question

Я пытаюсь сделать динамический список элементов с использованием Реагировать, т.е. у меня есть яваскрипт массив elems = ['foo','bar'] и я хотел бы, чтобы генерировать

<ul> 
    <li>foo</li> 
    <li>bar</li> 
</ul> 

Я хотел бы сделать это чисто в JSX. Есть ли удобный способ сделать это («эквивалент» углового ng-repeat)?

Answer 1

красота of React/JSX заключается в том, что вы в основном просто пишите JavaScript. Так что если у вас есть список вещей, и вы хотите, чтобы создать список компонентов, только map список:

<ul> 
    {items.map(item => <li>{item}</li>)} 
</ul> 

(и это тоже очень лаконичные со стрелкой функций)

Answer 2

чистый JSX способ сделать это (что я знаю). В реакторе нет эквивалента ng-repeat. Но JSX действительно не чистый так же, как и угловые шаблоны. В конце концов, они скомпилируются с использованием JavaScript.

Лучший способ заключается в цикле JSX и добавить его в массив:

render: function() { 
     var elems = ['foo','bar']; 
     var listItems = []; 
     for (var i = 0; i < elems.length; i++) { 
      listItems.push(<li>{elems[i]}</li>); 
     } 
     return (
      <ul> 
       {listItems} 
      </ul> 
     ); 
} 

Вы можете использовать JSX внутри цикла, как вы push в массив:

listItems.push(<li>{elems[i]}</li>);