JSX中使用For循環

你可以在JSX中使用for循環嗎？
或者更確切地說，寫這樣一個for的方法是什麼？JSX中使用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>;

來源

2017-09-14 morne

使用一個map所以你實際上返回的元素。一個foreach不會返回任何東西。您使用&&也是無效的。

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

注意，我添加了key屬性 - 用於反應以優化每個項目應該有一個唯一的密鑰元件的陣列的呈現（即不只是數字指數）。

來源

2017-09-14 10:55:09

你好多米尼克。如果它的「（entry）」是一個Key Value對。你如何分離價值觀？請。 – morne

條目是一個對象？在這種情況下，你可以做'Object.keys（entry）.map（...' –

是的，抱歉，剛纔看到了。謝謝 – morne

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

來源

2017-09-14 10:55:30

比使用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>;

來源

2017-09-14 10:55:57 bennygenel

JSX中使用For循環

回答

相關問題