反应相当于ng重复 [英] React equivalent for ng-repeat

问题描述

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

例如：

  var data = ['red'绿色'，'蓝色'] 
  

使用角度我会在我的HTML中做这样的事情： / p>

 < div ng-repeat =我在数据中> {{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'，'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重复的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！