web-dev-qa-db-fra.com

React équivalent pour ng-repeat

Je suis nouveau sur React.js. J'essaie de lier des tableaux de données. Je cherche l'équivalent de ng-repeat, mais je ne le trouve pas dans la documentation.

par exemple:

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

en utilisant angular j'aurais fait quelque chose comme ça dans mon html:

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

Je me demande le balisage de React pour ce faire

angularjsdata-bindingangularjs-ng-repeatreactjs
35
Morrisda

Dans React, vous écrivez simplement le code JavaScript nécessaire (et vous pouvez éventuellement l'intégrer dans un contrôle réutilisable comme vous le verrez). C'est très prescriptif et facile à faire une fois que vous avez appris les modèles de base (et comment ils diffèrent d'AngularJS).

Ainsi, dans la fonction render, vous devez parcourir la liste. Dans l'exemple ci-dessous, j'ai utilisé map, mais vous pouvez utiliser d'autres itérateurs selon vos besoins.

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

Ici il est utilisé.

Et, comme vous pouvez le voir, vous pouvez rapidement créer un composant réutilisable qui peut "se répéter" dans la liste.

37
WiredPrairie

Devrait juste être:

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

Voici un exemple utilisant ES6 et un composant sans état.

Le code ci-dessous illustre la création d'un menu en parcourant une liste d'éléments de menu.

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;

Fondamentalement, ce que nous faisons est simplement une itération javascript pure utilisant Array.map .

3
Kirill Fuchs

Dans votre fonction render à l'intérieur d'un composant react, vous pouvez faire ceci:

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

Et maintenant, vous pouvez renvoyer le dataComponent.

1
Michel Uncini

Pour effectuer la même tâche que ng-repeat dans React il vous suffit de penser nativement. Sous le capot, ng-repeat utilise simplement un itérateur Javascript natif. Vous pouvez utiliser le même type d'itérateur natif directement dans React. Par exemple, j'utiliserai 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> 
    ); 
  } 
});

J'ai obtenu l'exemple ci-dessus de http://angulartoreact.com/ng-repeat-react-equivalent . Le site a plus d'exemples de React équivalents à Angular directives.

0
Michael Martin

Si vous cherchez un équivalent ng-repeat plus proche pour React, vous voudrez peut-être essayer Tersus-jsx.macro - un module que j'ai créé pour fournir les capacités ng-if et ng-repeat d'Angular dans React = sans mélanger les expressions JSX et ES6, ce qui est vraiment bien plus agréable.

Donc, la façon typique de faire une répétition dans React est comme ceci:

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

Si Tersus-jsx.macro est utilisé, vous pouvez simplement définir tj-for prop, tout comme ng-repeat dans AngularJS:

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

Étant donné que la dernière version de create-react-app prend en charge Babel-Macro dès la sortie de la boîte, tout ce que vous avez à faire est d'installer npm ce module, d'envelopper le retour de rendu avec "tersus" et de commencer à assigner les accessoires. Il est également livré avec le support ng-if (tj-if) et peut être mélangé avec tj-for.

Vous pouvez l'installer à partir de: https://www.npmjs.com/package/tersus-jsx.macro

0
David Yu