Реагировать эквивалент для ng-repeat

Ответ 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);

Здесь он используется.

И, как вы можете видеть, вы можете быстро создать повторно используемый компонент, который может "повторяться" через список.

Ответ 2

Должно быть только:

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

Ответ 3

Вот пример использования 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;

В основном то, что мы делаем, это просто чистая итерация javascript, использующая Array.map.

Ответ 4

В вашей функции render внутри реагирующего компонента вы можете сделать это:

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

И теперь вы можете вернуть dataComponent.

Ответ 5

Чтобы выполнить ту же задачу, что и ng-repeat в React, вам просто нужно думать изначально. Под капотом 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.

Ответ 6

Если вы ищете более близкий эквивалент ng-repeat для React, вы можете попробовать Tersus-jsx.macro - модуль, который я создал для обеспечения возможностей Angular ng-if и ng-repeat в React без смешивания выражений JSX и ES6, которые намного лучше на самом деле.

Таким образом, типичный способ повторения в React выглядит следующим образом:

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

Если используется Tersus-jsx.macro, вы можете просто определить tj-for prop, как ng-repeat в AngularJS:

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

Поскольку последняя версия create-реакции-приложения поддерживает Babel-Macro из коробки, все, что вам нужно сделать, это npm установить этот модуль, обернуть результат рендеринга "tersus" и начать назначать реквизиты. Он также поставляется с поддержкой ng-if (tj-if) и может использоваться совместно с tj-for.

Вы можете установить это с: https://www.npmjs.com/package/tersus-jsx.macro