反应等效于 ng-repeat [英] React equivalent for 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({渲染:函数(){返回 (<div>{ this.props.data.map(function(item) {返回<div>{item}</div>})}

);}});var data = ['red', 'green', 'blue'];React.render(<List data={ data }/>, document.body);

这里正在使用中.

而且，如您所见，您可以快速构建一个可以重复"遍历列表的可重用组件.

I am new to React.js. I am trying to bind data arrays. I am looking for the equivalent of ng-repeat, but i can't find it inside documentation.

e.g:

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

using angular i would have done something like this in my html:

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

I am wondering the React's markup to do this

解决方案

In React, you just write the necessary JavaScript (and potentially build it into a reusable control as you'll see). It's very prescriptive and easy to do once you learn the basic patterns (and how they differ from AngularJS).

So, in the render function, you'd need to iterate through the list. In the example below, I've used map, but you could use other iterators as needed.

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 it is in use.

And, as you can see, you can quickly build a reusable component that can "repeat" through the list.

这篇关于反应等效于 ng-repeat的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！