web-dev-qa-db-ja.com

React ng-repeatと同等

React.jsは初めてです。データ配列をバインドしようとしています。 ng-repeatに相当するものを探していますが、ドキュメント内で見つけることができません。

例えば：

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

angularを使用すると、私のhtmlで次のようなことができます。

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

これを行うためのReactのマークアップが不思議です

angularjsdata-bindingangularjs-ng-repeatreactjs
35
Morrisda

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

ここ 使用中です。

そして、ご覧のとおり、リストを「繰り返し」できる再利用可能なコンポーネントをすばやく作成できます。

37
WiredPrairie

ちょうどする必要があります：

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

次に、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の繰り返しです。

3
Kirill Fuchs

反応コンポーネント内のrender関数で、これを行うことができます：

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

これで、dataComponentを返すことができます。

1
Michel Uncini

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の例がさらにあります。

0
Michael Martin

Reactのより近いng-repeatの同等物を探しているなら、Angularのng-ifとng-repeatの機能をReactで提供するために作成したモジュールです。 = JSX式とES6を混合せずに、これは実際にはるかに優れています。

したがって、React=で繰り返しを行う典型的な方法は次のようになります。

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

Tersus-jsx.macroが使用されている場合、AngularJSのng-repeatのようにtj-for propを簡単に定義できます。

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

Create-react-appの最新バージョンはデフォルトでBabel-Macroをサポートしているため、このモジュールをnpmインストールし、レンダリングリターンを「tersus」でラップして、小道具の割り当てを開始するだけです。また、ng-ifサポート（tj-if）が付属しており、tj-forと組み合わせて使用​​できます。

以下からインストールできます： https://www.npmjs.com/package/tersus-jsx.macro

0
David Yu