JSX内でForループを使用

Question

JSXでforループをこのように使用できますか？
あるいは、これのようなforを書き込むためのプロッパーの方法は何ですか？

var graph = 
     <div className={"chartContent"}> 

     . 
     . 
     . 

      <div className="panel"> 
       {DataRows.forEach(function(entry) && 
        <div className="col-sm-2 graphPanel graphPanelExtra"> 
         <div className="panel panel-primary"> 
          <div>entry</div> 
         </div> 
        </div> 
       )} 

      </div> 
     </div>; 

Answer 1

mapを使用すると、実際に要素が返されます。 foreachは何も返さない。 &&の使用も無効でした。私はkeyプロパティを追加

var graph = 
     <div className={"chartContent"}> 
      <div className="panel"> 
       {DataRows.map(entry => 
        <div key={entry.id} className="col-sm-2 graphPanel graphPanelExtra"> 
         <div className="panel panel-primary"> 
          <div style={{textAlign: 'center'}}>entry</div> 
         </div> 
        </div> 
       )} 
      </div> 
     </div>; 

注 - 各項目は一意のキーを有していなければならない要素のアレイのレンダリングを最適化するために反応する（つまり、単に数値インデックスではありません）。

Answer 2

forEachは何も返しません。あなたはそれから何かの結果を見ることはありません。代わりに.mapなどを使用できます。

{ 
    DataRows.map(function (entry) { 
      return <div className="col-sm-2 graphPanel graphPanelExtra"> 
         <div className="panel panel-primary"> 
          <div style={{textAlign: 'center'}}>entry</div> 
         </div> < /div> 
       }) 
} 

Answer 3

むしろforEachループを使用するよりも、あなたはArray.prototype.map()

var graph = 
    <div className={"chartContent"}> 

    . 
    . 
    . 

     <div className="panel"> 
      {DataRows.map((entry) => (
       <div className="col-sm-2 graphPanel graphPanelExtra"> 
        <div className="panel panel-primary"> 
         <div style={{textAlign: 'center'}}>entry</div> 
        </div> 
       </div> 
       ) 
      )} 

     </div> 
    </div>;