在 JSX 文件中循环

Question

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

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

我想纯粹在 JSX 中做这件事。有没有方便的方法来做到这一点（"equivalent" of angular ng-repeat）？

Answer 1

没有纯 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>
        );
}

当您 push 进入数组时，您仍然可以在循环内使用 JSX：

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

Answer 2

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

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

（加上箭头函数也很简洁）

在 JSX 文件中循环

Looping in JSX files

reactjs

react-jsx