反应相当于 ng-repeat

Question

我是 React.js 的新手。我正在尝试绑定数据数组。我正在寻找 ng-repeat 的等效项，但我无法在文档中找到它。

例如：

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

使用 angular 我会在我的 html 中做这样的事情：

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

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

Answer 1

应该只是：

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

Answer 2

在反应组件内的 render 函数中，您可以这样做：

var data =  ['red', 'green', 'blue'];
var dataComponent = [];
data.forEach(function (dataValue) {
    dataComponent.push(<div> {dataValue} </div>);
});

现在您可以return dataComponent。

Answer 3

在 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正在使用中

而且，如您所见，您可以快速构建一个可以 "repeat" 通过列表的可重用组件。

Answer 4

要在 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 得到了上面的例子。该站点有更多与 Angular 指令等效的 React 示例。

Answer 5

这是一个使用 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: 'Ask Question'}

].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 迭代

反应相当于 ng-repeat

React equivalent for ng-repeat

data-binding

angularjs

angularjs-ng-repeat

reactjs