Question

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

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

我想在JSX中完全这样做。有没有方便的方法（角度ng-repeat的“等效”）？

Answer 1

React / JSX的优点在于你基本上只是编写JavaScript。因此，如果您有一个事项列表并想要创建组件列表，只需map列表：

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

（它也非常简洁的箭头功能）

Answer 2

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

在JSX文件中循环

2 个答案: