angularjs – ng-repeat的等效反应

前端之家收集整理的这篇文章主要介绍了angularjs – ng-repeat的等效反应前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我是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它正在使用中。

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

猜你在找的Angularjs相关文章