React equivalent for ng-repeat

问题

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

回答1:

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.

回答2:

Should just be:

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

回答3:

Here is an example using ES6, and a stateless component.

The below code demonstrates creating a menu by looping through a list of menu items.

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;

Basically what we're doing is just pure javascript iteration utilizing Array.map.

回答4:

In your render function inside a react component you can do this:

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

And now you can return the dataComponent.

回答5:

To perform the same task as ng-repeat in React you just need to think natively. Under the hood ng-repeat is just using a native Javascript iterator. You can use the same sort of native iterator directly in React. For example, I`ll use 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> 
    ); 
  } 
});

I got the above example from http://angulartoreact.com/ng-repeat-react-equivalent . The site has more examples of React equivaents to Angular directives.

回答6:

If you are looking a closer ng-repeat equivalent for React, you might want to try Tersus-jsx.macro - a module I have created to provide Angular's ng-if and ng-repeat capabilities in React without mixing JSX expressions and ES6, which is much nicer really.

So the typical way of doing a repeat in React is like this:

<div>
   {list.map(i => (
     <button
       id="gotoA"
       className="link"
       onClick={clicking}
     />
  )}
</div>

If Tersus-jsx.macro is used, you can simply define tj-for prop, just like ng-repeat in AngularJS:

<div>
  <button
    tj-for={list}
    id="gotoA"
    className="link"
    onClick={clicking}
  />
</div>

Since the latest version of create-react-app support Babel-Macro out of the box, all you need to do is npm install this module, wrap the render return with "tersus" and start assigning the props. It also comes with ng-if support (tj-if) and can be mix-used with tj-for.

You can install this from: https://www.npmjs.com/package/tersus-jsx.macro

来源：https://stackoverflow.com/questions/28994378/react-equivalent-for-ng-repeat