angularjs - React 等价于 ng-repeat

Question

我是 React.js 新手。我正在尝试绑定(bind)数据数组。我正在寻找 ng-repeat 的等效项，但我在文档中找不到它。

例如:

var data =  ['red', 'green', 'blue']

使用 Angular 我会在我的html中做这样的事情:

<div ng-repeat="i in data">{{i}}</div>

我想知道 React 的标记可以做到这一点

Answer 1

在 React 中，您只需编写必要的 JavaScript(并且可能将其构建为可重用的控件，正如您将看到的那样)。一旦您学习了基本模式(以及它们与 AngularJS 的不同之处)，它就非常规范且容易做到。

因此，在 render 函数中，您需要迭代列表。在下面的示例中，我使用了 map，但您可以根据需要使用其他迭代器。

var List = React.createClass({
    render: function() {
        return (<div>
        { this.props.data.map(function(item) {
                return <div>{item}</div>
            })
        }
        </div>);
    }
});

var data =  ['red', 'green', 'blue'];

React.render(<List data={ data }  />, document.body);

Here正在使用中。

而且，正如您所看到的，您可以快速构建一个可以“重复”列表的可重用组件。