对ng-repeat的反应等效

Question

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

例如:

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

使用角度我会在我的HTML中做这样的事情:

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

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

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

在这里它正在使用中.

而且,正如您所看到的,您可以快速构建一个可以在列表中"重复"的可重用组件.

Answer 2

应该只是:

{data.map(i => <div>{i}</div>)}