我是 React.js 的新手。我正在尝试绑定数据数组。我正在寻找 ng-repeat 的等价物，但我在文档中找不到它。
例如：
var data = ['red', 'green', 'blue']
使用 angular 我会在我的 html 中做这样的事情：
<div ng-repeat="i in data">{{i}}</div>
我想知道 React 的标记可以做到这一点
【问题讨论】：
标签： angularjs data-binding angularjs-ng-repeat reactjs
这是一个使用 ES6 和无状态组件的示例。
下面的代码演示了通过遍历菜单项列表来创建菜单。
import React from 'react';
import Menu from 'material-ui/lib/menus/menu';
import MenuItem from 'material-ui/lib/menus/menu-item';
const menuItems = [
{route: '/questions', text: 'Questions'},
{route: '/jobs', text: 'Jobs'},
{route: '/tags', text: 'Tags'},
{route: '/users', text: 'Users'},
{route: '/badges', text: 'Badges'}
{route: '/questions/new', text: ''}
].map((item, index) => <MenuItem key={index} primaryText={item.text} value={item.route} />);
const Sidebar = ({history}) => (
<Menu
autoWidth={false}
onItemTouchTap={(e, child) => history.push(child.props.value)}
>
{menuItems}
</Menu>
);
export default Sidebar;
基本上我们所做的只是利用Array.map 的纯javascript 迭代。
【讨论】：
要在 React 中执行与 ng-repeat 相同的任务，您只需要原生思考。在引擎盖下 ng-repeat 只是使用本机 Javascript 迭代器。你可以直接在 React 中使用相同类型的原生迭代器。例如，我将使用 Array.map：
var RepeatModule = React.createClass({
getInitialState: function() {
return { items: [] }
},
render: function() {
var listItems = this.props.items.map(function(item) {
return (
<li key={item.name}>
<a href={item.link}>{item.name}</a>
</li>
);
});
return (
<div>
<ul>
{listItems}
</ul>
</div>
);
}
});
我从http://angulartoreact.com/ng-repeat-react-equivalent 得到了上面的例子。该网站有更多 React 等效于 Angular 指令的示例。
【讨论】：
在 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);
Here 正在使用中。
而且，如您所见，您可以快速构建一个可以“重复”列表的可重用组件。
【讨论】：
Array.map. 的文档 它只是为data 数组中的每个项目返回一个<div>（作为一个新数组）。
在 react 组件内的 render 函数中，您可以这样做：
var data = ['red', 'green', 'blue'];
var dataComponent = [];
data.forEach(function (dataValue) {
dataComponent.push(<div> {dataValue} </div>);
});
现在您可以返回数据组件了。
【讨论】：
应该是：
{data.map(i => <div>{i}</div>)}
【讨论】：