相当于ng-repeat

小编典典

相当于ng-repeat

reactjs

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

例如：

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

使用角度我会在我的html中做这样的事情：

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

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

阅读 273

2020-07-22

共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);

这里正在使用。

而且，如您所见，您可以快速构建一个可重复使用的组件，该组件可以在列表中“重复”。

2020-07-22