在JSX文件中循环播放

我正在尝试使用React渲染元素的动态列表，即我有一个javascript数组elems = ['foo','bar'] ，我想生成

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

我想纯粹在JSX中完成此操作。 是否有任何方便的方法来做到这一点（一个角度ng-repeat的“等效”）？

---

React / JSX的美妙之处在于你基本上只是写JavaScript。 所以如果你有一个列表，并且想创建一个组件列表，只需要map列表：

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

（并且它也非常简洁，具有箭头功能）

---

没有纯JSX的方式来做到这一点（我知道）。 在React中没有相当于ng-repeat的功能。 但是，JSX并不像Angular模板那样纯粹。 毕竟，它们会编译成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>);

链接地址: http://www.djcxy.com/p/52059.html

上一篇: Looping in JSX files

下一篇: JSX for...in loop