angularjs – ng-repeat的等效反应

发布时间：2020-12-17 08:31:10 所属栏目：安全来源：网络整理

导读：我是React.js的新手。我试图绑定数据数组。我正在寻找相当于ng-repeat，但我不能在文档中找到它。例如： var data = ['red','green','blue'] 使用angular我会在我的html做这样的事情： div ng-repeat="i in data"{{i}}/div 我想知道React的标记做这个在Rea

我是React.js的新手。我试图绑定数据数组。我正在寻找相当于ng-repeat，但我不能在文档中找到它。

例如：

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

使用angular我会在我的html做这样的事情：

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

我想知道React的标记做这个

在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','blue'];

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

Here它正在使用中。

而且，你可以看到，你可以快速构建一个可重复使用的组件，可以“重复”通过列表。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!