React JSX内でループする

Question

私はReact JSX（ObjectRowは別のコンポーネントです）で次のようなことをやろうとしています。

<tbody>
    for (var i=0; i < numrows; i++) {
        <ObjectRow/>
    } 
</tbody>

JSXは関数呼び出しに対応付けられているので、なぜこれが有効なJSXではないのかを理解し理解しています。しかし、テンプレートの分野から来て、JSXの初心者であることから、私はどのようにして上記のことを達成できるかわからない（コンポーネントを複数回追加）。

Answer 1

JavaScriptの関数を呼び出しているだけのように考えてください。関数呼び出しへの引数が行くところでforループを使うことはできません：

return tbody(
    for (var i = 0; i < numrows; i++) {
        ObjectRow()
    } 
)

関数tbodyが引数としてforループをどのように渡されているかを見てください。もちろんこれは構文エラーです。

しかし、配列を作成して、それを引数として渡すことができます。

var rows = [];
for (var i = 0; i < numrows; i++) {
    rows.Push(ObjectRow());
}
return tbody(rows);

---

JSXで作業するときは、基本的に同じ構造を使用できます。

var rows = [];
for (var i = 0; i < numrows; i++) {
    // note: we add a key prop here to allow react to uniquely identify each
    // element in this array. see: https://reactjs.org/docs/lists-and-keys.html
    rows.Push(<ObjectRow key={i} />);
}
return <tbody>{rows}</tbody>;

ちなみに、私のJavaScriptの例は、JSXの例が変換するものとほとんど同じです。 Babel REPL で遊んで、JSXのしくみを理解してください。

Answer 2

これがあなたの状況でうまくいくかどうかはわかりませんが、多くの場合 map が良い答えです。

これがforループを含むコードの場合

<tbody>
    for (var i=0; i < objects.length; i++) {
        <ObjectRow obj={objects[i]} key={i}>
    } 
</tbody>

map ：のように書くことができます。

<tbody>
    {objects.map(function(object, i){
        return <ObjectRow obj={object} key={i} />;
    })}
</tbody>

ES6の構文：

<tbody>
    {objects.map((object, i) => <ObjectRow obj={object} key={i} />)}
</tbody>

Answer 3

@ FakeRainBrigandの回答のようにmap()への配列がなく、これをインライン化したい場合は、ソースレイアウトが@ SophieAlpertの回答よりも近い出力に対応するようにします。

ES2015（ES6）構文（スプレッドおよび矢印機能）

http://plnkr.co/edit/mfqFWODVy8dKQQOkIEGV?p=preview

<tbody>
  {[...Array(10)].map((x, i) =>
    <ObjectRow key={i} />
  )}
</tbody>

Babelで再コンパイルすると、 警告ページ はArray.fromが拡散に必要であると言っていますが、現在（v5.8.23）は実際のArrayを拡散するときにはそうではないようです。それを明確にするために ドキュメントの問題 openがあります。しかし、あなた自身の責任で使用するかpolyfillしてください。

バニラES5

Array.apply

<tbody>
  {Array.apply(0, Array(10)).map(function (x, i) {
    return <ObjectRow key={i} />;
  })}
</tbody>

インラインIIFE

http://plnkr.co/edit/4kQjdTzd4w69g8Suu2hT?p=preview

<tbody>
  {(function (rows, i, len) {
    while (++i <= len) {
      rows.Push(<ObjectRow key={i} />)
    }
    return rows;
  })([], 0, 10)}
</tbody>

他の答えからのテクニックの組み合わせ

出力に合わせてソースレイアウトを維持しますが、インライン部分をよりコンパクトにします。

render: function () {
  var rows = [], i = 0, len = 10;
  while (++i <= len) rows.Push(i);

  return (
    <tbody>
      {rows.map(function (i) {
        return <ObjectRow key={i} index={i} />;
      })}
    </tbody>
  );
}

ES2015シンタックスとArrayメソッド

Array.prototype.fillを使えば、上の図のようにspreadを使う代わりにこれを行うことができます。

<tbody>
  {Array(10).fill(1).map((el, i) =>
    <ObjectRow key={i} />
  )}
</tbody>

（fill()の引数は、実際には省略することもできますが、100％ではありません。）以前のバージョンのfill()ソリューションの間違いを訂正してくれた@FakeRainBrigandに感謝します（リビジョンを参照）。

key

すべての場合において、key attrは開発ビルドでの警告を軽減しますが、子ではアクセスできません。子でインデックスを利用可能にしたい場合は、追加のattrを渡すことができます。議論については リストとキー を参照してください。

Answer 4

ES6構文で map Array メソッドを使用するだけです。

<tbody>
  {items.map(item => <ObjectRow key={item.id} name={item.name} />)} 
</tbody>

keyプロパティを忘れないでください。

Answer 5

Array map関数を使うことは、要素のArrayをループして、それに従ってReactの中でコンポーネントを作成するための非常に一般的な方法です。これは、ループをJSXで実行するための非常に効率的できちんとした方法です。これを実行する唯一の方法はnotですが、望ましい方法 

また、必要に応じて、反復ごとにunique Keyを持つことを忘れないでください。 Map functionは0からユニークなインデックスを作成しますが、producdインデックスを使用することはお勧めできませんが、値がユニークな場合、またはユニークキーがある場合はそれらを使用できます。

<tbody>
  {numrows.map(x=> <ObjectRow key={x.id} />)}
</tbody>

また、Arrayのmap関数に慣れていない場合は、MDNからの行数も少なくなります。

mapは提供されたコールバック関数を配列内の各要素に対して順番に1回呼び出し、その結果から新しい配列を作成します。 callback は、値が割り当てられている配列のインデックスに対してのみ呼び出されます。は、undefinedも含みます。 配列の欠けている要素（つまり、設定されていないインデックス、削除されたインデックス、または値が割り当てられていないインデックス）は呼び出されません。

callbackは、要素の値、要素のインデックス、および走査されているArrayオブジェクトの3つの引数で呼び出されます。

ThisArgパラメータがmapに提供されている場合、それはコールバックのthis値として使用されます。そうでなければ、undefinedという値がthis値としてとして使われます。コールバックによって最終的に観察可能なこの値は、関数によって見られたこれを決定するための通常の規則に従って決定されます。

mapは、呼び出された配列を変更しません（コールバックが呼び出された場合は変更されます）。

Answer 6

すでにlodashを使用している場合は、 _.times 関数が便利です。

import React, { Component } from 'react';
import Select from './Select';
import _ from 'lodash';

export default class App extends Component {
    render() {
        return (
            <div className="container">
                <ol>
                    {_.times(3, i =>
                        <li key={i}>
                            <Select onSelect={this.onSelect}>
                                <option value="1">bacon</option>
                                <option value="2">cheez</option>
                            </Select>
                        </li>
                    )}
                </ol>
            </div>
        );
    }
}

Answer 7

Returnブロックの外側にも抽出できます。

render: function() {
    var rows = [];
    for (var i = 0; i < numrows; i++) {
        rows.Push(<ObjectRow key={i}/>);
    } 

    return (<tbody>{rows}</tbody>);
}

Answer 8

これは古いスレッドですが、 http://wix.github.io/react-templates/ をチェックアウトするとよいでしょう。 rt-repeatなど）.

あなたがreact-templatesを使った場合のあなたの例は、次のようになります。

<tbody>
     <ObjectRow rt-repeat="obj in objects"/>
</tbody>

Answer 9

numrowsが配列の場合、それはとても簡単です。

<tbody>
   {numrows.map(item => <ObjectRow />)}
</tbody>

Reactの配列データ型は非常に優れています、配列は新しい配列を元に戻し、フィルタをサポートし、減らすことができます.

Answer 10

mapステートメントを使用することを指すいくつかの答えがあります。これは、FeatureListコンポーネント内の反復子を使用して、featuresというJSONデータ構造に基づいてFeatureコンポーネントを一覧表示する例です。

const FeatureList = ({ features, onClickFeature, onClickLikes }) => (
  <div className="feature-list">
    {features.map(feature =>
      <Feature
        key={feature.id}
        {...feature}
        onClickFeature={() => onClickFeature(feature.id)}
        onClickLikes={() => onClickLikes(feature.id)}
      />
    )}
  </div>
); 

GitHubで完全な FeatureListコード を見ることができます。 featuresフィクスチャはここにリストされています 。

Answer 11

私たちはあなたの状態の項目の配列があるとしましょう

[{name: "item1", id: 1}, {name: "item2", id: 2}, {name: "item3", id: 3}]

<tbody>
    {this.state.items.map((item) => {
        <ObjectRow key={item.id} name={item.name} />
    })} 
</tbody>

Answer 12

JSXコードは純粋なJavaScriptコードにコンパイルされ、タグはReactElementオブジェクトに置き換えられます。 JavaScriptでは、関数を複数回呼び出して、返された変数を収集することはできません。

違法です。唯一の方法は、配列を使用して関数が返す変数を保存することです。

または、 Array.prototype.map を使用して、この状況を処理できます JavaScript ES5以降 .

Angularのng-repeat のような繰り返し関数を実装するために、新しいJSX構文を再作成する他のコンパイラを作成することができます。

Answer 13

...あるいは、オブジェクトの配列を用意して、それを関数にマップして目的の出力を得ることもできます。これは私がこれを好む、なぜならそれは私がrenderのリターン内にロジックなしでコーディングの良い習慣を維持するのを助けるからです。 

render() {
const mapItem = [];
for(let i =0;i<item.length;i++) 
  mapItem.Push(i);
const singleItem => (item, index) {
 // item the single item in the array 
 // the index of the item in the array
 // can implement any logic here
 return (
  <ObjectRow/>
)

}
  return(
   <tbody>{mapItem.map(singleItem)}</tbody>
  )
}

Answer 14

単純に.map()を使用してコレクションをループ処理し、各反復の小道具とともに<ObjectRow>項目を返します。

objectsがどこかにある配列だとします...

<tbody>
  { objects.map((obj, index) => <ObjectRow obj={ obj } key={ index }/> ) }
</tbody>

Answer 15

return（） of render methodの中で変換することを選択した場合、最も簡単なオプションは map（） methodを使用することです。次に示すように、map（）関数を使用して配列をJSX構文にマップします（ES6構文が使用されます）。

---

親コンポーネントの内側 ：

<tbody> { objectArray.map((object, index) => <ObjectRow key={index} object={object}>) } </tbody>

あなたの子コンポーネントに追加されたkey属性に注意してください。キー属性を指定しなかった場合は、コンソールに次の警告が表示されます。

警告：配列またはイテレータの中のそれぞれの子供は固有の "キー"プロップを持つべきです。

---

ObjectRow コンポーネントで、そのプロパティからオブジェクトにアクセスできます。

ObjectRowコンポーネントの内側

const { object } = this.props

または 

const object = this.props.object

これにより、親コンポーネントから ObjectRow component内の変数objectに渡したオブジェクトが取得されます。目的に応じて、そのオブジェクトの値を吐き出すことができます。

---

参考文献： 

Javascriptのmap（）メソッド

ECMAスクリプト6またはES6

Answer 16

ES2015/Babelの可能性はジェネレータ関数を使ってJSXの配列を作成することです：

function* jsxLoop(times, callback)
{
    for(var i = 0; i < times; ++i)
        yield callback(i);
}

...

<tbody>
    {[...jsxLoop(numrows, i =>
        <ObjectRow key={i}/>
    )]}
</tbody>

Answer 17

私はこれを使う：

gridItems = this.state.applications.map(app =>
                            <ApplicationItem key={app.Id} app={app } />
                            );

PD：鍵を決して忘れないでください。そうしないと、たくさんの警告が表示されます。

Answer 18

これを実行する方法はいくつかあります。 JSXは、最終的にはJavaScriptにコンパイルされます。有効なJavaScriptを書いている限り、あなたは良いでしょう。

私の答えは、ここですでに提示されているすべての素晴らしい方法を統合することです。

オブジェクトの配列がない場合は、単純に行数を入力します。

returnブロック内で、Arrayを作成し、Array.prototype.mapを使用します。

render() {
  return (
    <tbody>
      {Array(numrows).fill(null).map((value, index) => (
        <ObjectRow key={index}>
      ))}
    </tbody>
  );
}

returnブロックの外側では、単純に通常のJavaScript for-loopを使用します。

render() {
  let rows = [];
  for (let i = 0; i < numrows; i++) {
    rows.Push(<ObjectRow key={i}/>);
  } 
  return (
    <tbody>{rows}</tbody>
  );
}

すぐに呼び出された関数式：

render() {
  return (
    <tbody>
      {() => {
        let rows = [];
        for (let i = 0; i < numrows; i++) {
          rows.Push(<ObjectRow key={i}/>);
        }
        return rows;
      }}
    </tbody>
  );
}

オブジェクトの配列がある場合

returnブロック内で、.map()各オブジェクトを<ObjectRow>コンポーネントに渡します。

render() {
  return (
    <tbody>
      {objectRows.map((row, index) => (
        <ObjectRow key={index} data={row} />
      ))}
    </tbody>
  );
}

returnブロックの外側では、単純に通常のJavaScript for-loopを使用します。

render() {
  let rows = [];
  for (let i = 0; i < objectRows.length; i++) {
    rows.Push(<ObjectRow key={i} data={objectRows[i]} />);
  } 
  return (
    <tbody>{rows}</tbody>
  );
}

すぐに呼び出された関数式：

render() {
  return (
    <tbody>
      {(() => {
        let rows = [];
        for (let i = 0; i < objectRows.length; i++) {
          rows.Push(<ObjectRow key={i} data={objectRows[i]} />);
        }
        return rows;
      })()}
    </tbody>
  );
}

Answer 19

私はプログラミングロジックがrenderの戻り値の外側で起こるというアプローチを好む傾向があります。これにより、実際に表示される内容を簡単に調べやすくなります。

だから私はおそらく何かのようになります：

import _ from 'lodash';

...

const TableBody = ({ objects }) => {
  const objectRows = objects.map(obj => <ObjectRow object={obj} />);      

  return <tbody>{objectRows}</tbody>;
} 

確かに、これはインライン化してもうまくいく可能性があるような少量のコードです。

Answer 20

ES2015 Array.from マップ機能付き+キー

.map()に何もない場合は、Array.from()をmapFnと組み合わせて要素を繰り返すことができます。

<tbody>
  {Array.from({ length: 5 }, (v, k) => <ObjectRow key={k} />)}
</tbody>

Answer 21

もちろん他の答えで示唆されているように.mapで解決することができます。すでにbabelを使用しているのであれば、 jsx-control-statements を使用することを考えることができます。少し設定が必要ですが、読みやすさの点で価値があると思います（特に無反応開発者）。 リンターを使っているなら、 eslint-plugin-jsx-control-statementsもあります

Answer 22

何度もループして戻るには、 from および map の助けを借りてそれを実現できます。

  <tbody>
    {
      Array.from(Array(i)).map(() => <ObjectRow />)
    }
  </tbody>

どこi = number of times

Answer 23

これは複数の方法で実行できます。

1. 上記のように、returnname__が配列内のすべての要素を格納する前に

2. returnname__内のループ

   方法1

    let container =[];
       let arr = [1,2,3] //can be anything array, object 
   
       arr.forEach((val,index)=>{
         container.Push(<div key={index}>
                        val
                        </div>)
           /** 
           * 1. All loop generated elements require a key 
           * 2. only one parent element can be placed in Array
           * e.g. container.Push(<div key={index}>
                                       val
                                 </div>
                                 <div>
                                 this will throw error
                                 </div>  
                               )
           **/   
       });
       return (
         <div>
            <div>any things goes here</div>
            <div>{container}</div>
         </div>
       )
   

   方法2 

      return(
        <div>
        <div>any things goes here</div>
        <div>
           {(()=>{
             let container =[];
             let arr = [1,2,3] //can be anything array, object 
             arr.forEach((val,index)=>{
               container.Push(<div key={index}>
                              val
                              </div>)
                            });
                       return container;     
           })()}
   
        </div>
     </div>
   )
   

Answer 24

React docのサンプル： JavaScript Expressions as Children

function Item(props) {
  return <li>{props.message}</li>;
}

function TodoList() {
  const todos = ['finish doc', 'submit pr', 'nag dan to review'];
  return (
    <ul>
      {todos.map((message) => <Item key={message} message={message} />)}
    </ul>
  );
}

あなたの場合、次のように書くことをお勧めします。

function render() {
  return (
    <tbody>
      {numrows.map((roe, index) => <ObjectRow key={index} />)}
    </tbody>
  );
}

Reactはキーを使用して配列内のデータを異なるため、キーは非常に重要です。

Answer 25

私はそれを好きに使う

<tbody>
{ numrows ? (
   numrows.map(obj => { return <ObjectRow /> }) 
) : null}
</tbody>

Answer 26

JSXコード内にJavascript構文を書いているので、Javascriptを中括弧で囲む必要があります。

row = () => {
   var rows = [];
   for (let i = 0; i<numrows; i++) {
       rows.Push(<ObjectRow/>);
   }
   return rows;
}
<tbody>
{this.row()}  
</tbody>

Answer 27

自己起動関数を使用することもできます。 

return <tbody>
           {(() => {
              let row = []
              for (var i = 0; i < numrows; i++) {
                  row.Push(<ObjectRow key={i} />)
              }
              return row

           })()}
        </tbody>

Answer 28

素晴らしい質問です。

一定数のコンポーネントを追加したいときに私がすることは、ヘルパー関数を使用することです。

JSXを返す関数を定義します。

const myExample = () => {
    let myArray = []
    for(let i = 0; i<5;i++) {
        myArray.Push(<MyComponent/>)
    }
    return myArray
}

//... in JSX

<tbody>
    {myExample()}
</tbody>

Answer 29

これに対する簡単な解決策は次のとおりです。

var Object_rows=[];
for (var i=0; i < numrows; i++) {
    Object_rows.Push(<ObjectRow/>)
} 
<tbody>
{Object_rows}
</tbody>

マッピングや複雑なコードは不要です。行を配列にプッシュし、それをレンダリングするために値を返すだけです。

Answer 30

次のようなことができます。

let foo = [1,undefined,3]
{ foo.map(e => !!e ? <Object /> : null )}

Answer 31

このコードでも同じことができます。

    <tbody>
      {array.map(i => 
        <ObjectRow key={i.id} name={i.name} />
      )}
    </tbody>

Answer 32

以下は、オブジェクトの配列またはプレーン配列を繰り返すことに対応して対処できる解決策です。

const rows = [];
const numrows = [{"id" : 01, "name" : "abc"}];
numrows.map((data, i) => {
   rows.Push(<ObjectRow key={data.id} name={data.name}/>);
});

<tbody>
    { rows }
</tbody>

OR

const rows = [];
const numrows = [1,2,3,4,5];
for(let i=1, i <= numrows.length; i++){
   rows.Push(<ObjectRow key={numrows[i]} />);
};

<tbody>
    { rows }
</tbody>

更新：

オブジェクトの配列を反復するために私が最近よく知っているより良いアプローチは、リターン付きまたはリターンなしで直接.mapをレンダリングすることです。 

リターン付き.map

   const numrows = [{"id" : 01, "name" : "abc"}];
 <tbody>
       {numrows.map(data=> {
             return <ObjectRow key={data.id} name={data.name}/>
       })}
</tbody>

戻り値なしの.map

   const numrows = [{"id" : 01, "name" : "abc"}];
 <tbody>
       {numrows.map(data=> (
             <ObjectRow key={data.id} name={data.name}/>
       ))}
</tbody>

Answer 33

さて、ここに行きます。

{
 [1, 2, 3, 4, 5, 6].map((value, index) => {
  return <div key={index}>{value}</div>
 })
}

あなたがしなければならないことは、単にあなたの配列をマッピングし、あなたがレンダリングしたいものを返すだけで、return要素でkeyを使うことを忘れないでください。

Answer 34

問題は、あなたがjsx要素を返さないことです。そのような場合のための別の解決策がありますが、私は最も簡単なものを提供します：「use map function」！

<tbody>
  { numrows.map(item => <ObjectRow key={item.uniqueField} />) }
</tbody>

とてもシンプルで美しいですね。

Answer 35

JSX内で文字通りforループを使用したい場合は、IIFEを使用できます。

<tbody>
  {
    (function () {
      const view = [];
      for (let i = 0; i < numrows; i++) {
        view.Push(<ObjectRow key={i}/>);
      }
      return view;
    }())
  }
</tbody>

Answer 36

@jacefarm私が正しく理解していれば、このコードを使用できます。

<tbody>
    { new Array(numrows).fill(<ObjectRow/>) } 
</tbody>

このコードを使うこともできます：

<tbody>
   { new Array(numrows).fill('').map((item, ind) => <ObjectRow key={ind}/>) } 
</tbody>

この：

<tbody>
    new Array(numrows).fill(ObjectRow).map((Item, ind) => <Item key={ind}/>)
</tbody>

Answer 37

要素を配列に追加して、要素の配列をレンダリングします。
これは、コンポーネントの再レンダリングに必要な時間を短縮するのに役立ちます。

これは役に立つかもしれないいくつかの大まかなコードです：

MyClass extends Component {
    constructor() {
        super(props)
        this.state = { elements: [] }
    }
    render() {
        return (<tbody>{this.state.elements}<tbody>)
    }
    add() {
        /*
         * The line below is a cheap way of adding to an array in the state.
         * 1) Add <tr> to this.state.elements
         * 2) Trigger a lifecycle update.
         */
        this.setState({
            elements: this.state.elements.concat([<tr key={elements.length}><td>Element</td></tr>])
        })
    }
}

Answer 38

return (
        <table>
          <tbody>
          {
            numrows.map((item, index) => {
              <ObjectRow data={item} key={index}>
            })
          }
          </tbody>
        </table>
      );

Answer 39

反応にマップを使用することは、配列を反復処理するためのベストプラクティスです。 

Es6でのいくつかのエラーを防ぐためにsynthax mapが反応してこのように使用されます。 

<tbody>
 {items.map((item, index) => <ObjectRow key={index} name={item.name} />)} 
</tbody>

ここではComponentを呼び出しているので、矢印の後に括弧を入れる必要はありません。

しかし、あなたもこれを作ることができます： 

{items.map((item, index) => (
<ObjectRow key={index} name={item.name} />
))}

または 

{items.map((item, index) => {
// here you can log item 
      return (
       <ObjectRow key={index} name={item.name} />
     )
})}

なぜなら、もしあなたが矢印の後に角括弧 "{}"を入れると、reactはエラーを投げずにホワイトリストを表示するからです。

Answer 40

他の答えとしてnumrowsが配列の場合、最良の方法はmapメソッドです。そうではなく、あなたがjsxからのみアクセスする場合は、このES6メソッドも使用できます。 

<tbody>
    { 
      [...Array(numrows).fill(0)].map((value,index)=><ObjectRow key={index} />)
    } 
</tbody>

Answer 41

私は地図に従うためのもう一つの解決策を見つけましたレンダリング 

 <tbody>{this.getcontent()}</tbody>

そして別機能 

 getcontent() {
const bodyarea = this.state.movies.map(movies => (
  <tr key={movies._id}>
    <td>{movies.title}</td>
    <td>{movies.genre.name}</td>
    <td>{movies.numberInStock}</td>
    <td>{movies.publishDate}</td>
    <td>
      <button
        onClick={this.deletMovie.bind(this, movies._id)}
        className="btn btn-danger"
      >
        Delete
      </button>
    </td>
  </tr>
));
return bodyarea;
}

この例は多くの問題を簡単に解決します

Answer 42

<tbody>
   numrows.map((row,index) => (
      return <ObjectRow key={index}/>
   )
</tbody>

Answer 43

JSX内にJavaScriptコードを配置する必要があるときはいつでも{}を配置し、JavaScriptコードをこれらの括弧内に配置してください。  

こうすれば、jsx/reactの内側をループできます。

いう：

   <tbody>
    {your piece of code in JavaScript }
  </tbody>

例：

   <tbody>
    { items.map( ( item ) > { console.log(item) }) } // items looping using map
  </tbody>

Answer 44

jsx内のループはとても簡単です。

 {
      this.state.data.map((item,index)=>{
        return(
           <ComponentName key={index} data={item}/>
        );
      })
    }

Answer 45

React要素は単純なJSなので、javascriptの規則に従うことができます。だから、あなたはこのようにJavaScriptでforループを使用することができます -

<tbody>
    for (var i=0; i < numrows; i++) {
        <ObjectRow/>
    } 
</tbody>

しかし、有効で最良の方法は.map関数を使うことです。下に示された：-

<tbody>
    {listObject.map(function(listObject, i){
        return <ObjectRow key={i} />;
    })}
</tbody>

ここで、1つ必要なことがあります。キーを定義することです。さもなければそれはこのような警告を投げるでしょう： -

warning.js：36警告：配列またはイテレータの中のそれぞれの子供は固有の "キー"プロップを持つべきです。 ComponentNameのrenderメソッドを確認してください。詳しくは "link"を見てください。

Answer 46

render() {
  const elements = ['one', 'two', 'three'];

  const items = []

  for (const [index, value] of elements.entries()) {
    items.Push(<li key={index}>{value}</li>)
  }

  return (
    <div>
      {items}
    </div>
  )
}

Answer 47

あなたがやろうとしているどんなjavascriptアクションを正しく実行するためにそれを得るためにそれを得るためにJSXブロック内のjavascriptの周りに{}を使用してください。 

<tr>
  <td>
    {data.map((item, index) => {
      {item}
    })}
  </td>
</tr>

これはちょっとあいまいですが、データを任意の配列に交換できます。これにより、各項目のテーブル行とテーブル項目がわかります。配列の各ノードに複数のものがある場合は、特に次のようにしてそれをターゲットにします。

<td>{item.someProperty}</td>

その場合は、別のtdで囲み、前の例とは異なる方法で配置します。

Answer 48

関数を宣言し、それをパラメータで囲むのでない限り、これは不可能です。 JSXExpressionでは、式のみを記述でき、for（）、変数やクラスの宣言、またはif（）ステートメントのようなSTATEMENTSは記述できません。

それが、関数CallExpressionsが今日の気分でそうなっている理由です。私の忠告は、彼らに慣れることです。これは私がすることです：

const names = ['foo', 'bar', 'seba']
const people = <ul>{names.map(name => <li>{name}</li>)}</ul>

フィルタリング：

const names = ['foo', undefined, 'seba']
const people = <ul>{names.filter(person => !!person).map(name => <li>{name}</li>)}</ul>

if（）：

var names = getNames()
const people = {names && names.length && 
   <ul>{names.map(name => <li>{name}</li>)}</ul> }

if - else：

var names = getNames()
const people = {names && names.length ? 
  <ul>{names.map(name => <li>{name}</li>)}</ul> : <p>no results</p> }

それが役に立てば幸い

Answer 49

以下のような新しいコンポーネントを作成できます。

このようなObjectRowコンポーネントにキーとデータを渡します

export const ObjectRow = ({key,data}) => {
    return (
      <div>
          ...
      </div>
    );
}

新しいコンポーネントObjectRowListを作成して、データのコンテナーのように振る舞います

export const ObjectRowList = (objectRows) => {
    return (
      <tbody>
        {objectRows.map((row, index) => (
          <ObjectRow key={index} data={row} />
        ))}
      </tbody>
    );
}

Answer 50

あなたはJSXで書く必要があります 

<tbody>
    { 
    objects.map((object, i) => (
        <ObjectRow obj={object} key={i} />
    ));
    }
</tbody>

Answer 51

配列を反復してjsx要素を生成する方法がいくつかあります。それらのすべては良いですが、それらのすべてはループで直接インデックスを使用しました。データからの一意のIDをキーとして使用することをお勧めしますが、配列内の各オブジェクトから一意のIDを取得しない場合は、インデックスとしてキーを使用しますが、インデックスを直接キーとして使用することはお勧めできません。

.mapを使う理由はもう1つありますが、.mapが新しい配列を返すため、.foEachは使用できません。最近.mapを行うにはさまざまな方法があります。 

以下の.mapの異なるバージョンでは、一意のキーの使い方とjsx要素をループさせるための.mapの使い方について詳しく説明しています。

キーバージョンとしてデータから単一のjsx要素と一意のIDを返す場合、.mapは戻り値なしで

const {objects} = this.state;

<tbody>
    {objects.map(object => <ObjectRow obj={object} key={object.id} />)}
</tbody>

キーバージョンとしてデータから複数のjsx要素と一意のIDを返すときに.mapが返されることなく

const {objects} = this.state;

<tbody>
    {objects.map(object => (
       <div key={object.id}>
          <ObjectRow obj={object} />
       </div>
    ))}
</tbody>

キーバージョンとして単一のjsx要素とインデックスを返すときに.mapが戻り値なしで返される

const {objects} = this.state;

<tbody>
    {objects.map((object, index) => <ObjectRow obj={object} key={`Key${index}`} />)}
</tbody>

キーバージョンとして複数のjsx要素とインデックスを返すときに.mapが戻り値なしで返される

const {objects} = this.state;

<tbody>
    {objects.map((object, index) => (
       <div key={`Key${index}`}>
          <ObjectRow obj={object} />
       </div>
    ))}
</tbody>

キーバージョンとして複数のjsx要素とインデックスを返す場合はreturn付きの.map

const {objects} = this.state;

<tbody>
    {objects.map((object, index) => {
       return (
         <div key={`Key${index}`}>
            <ObjectRow obj={object} />
         </div>
       )
    })}
</tbody>

キーバージョンとしてデータから複数のjsx要素と一意のIDを返す場合は.mapを返します。

const {objects} = this.state;

<tbody>
    {objects.map(object => {
       return (
         <div key={object.id}>
            <ObjectRow obj={object} />
         </div>
       )
    })}
</tbody>

他の方法は 

render(){
  const {objects} = this.state;
  const objectItems = objects.map(object => {
       return (
         <div key={object.id}>
            <ObjectRow obj={object} />
         </div>
       )
    })
return(
   <div>
     <tbody>
       {objectItems}
     </tbody>
   </div>
 )
}

Answer 52

Integer-valueとして格納されている特定の行数を使用する場合に、より直接的な解決策を提供するためtypedArraysの助けを借りて、私たちは次の方法で望ましい解決策を達成することができました。

// Let's create typedArray with length of `numrows`-value
const typedArray = new Int8Array(numrows); // typedArray.length is now 2
const rows = []; // Prepare rows-array
for (let arrKey in typedArray) { // Iterate keys of typedArray
  rows.Push(<ObjectRow key={arrKey} />); // Push to an rows-array
}
// Return rows
return <tbody>{rows}</tbody>; 

Answer 53

新しいfor forループを試すことができます 

const Apple = {
   color: 'red',
   size: 'medium',
   weight: 12,
   sugar: 10
}
for (const prop of Apple.entries()){
   console.log(prop);
}

ここにいくつかの例があります： https://flaviocopes.com/react-how-to-loop/ /