陣營附加在每5個項目使用循環

Question

DIV我有這個道具循環，推動和顯示30項

var newArr = []; 
for (var key in this.props.data) { 

    // for (var i = start; i < start + 5; i++) { 
    //  if (i > array.length) return; 

    //  $("#output").append(array[k]); 
    // } 

    newArr.push(<div><Dates key={key} /></div>); 
} 

我需要顯示在列。這5個項目，以便把它包5個項目中的每個div都喜歡jQuery代碼評論出了可能嗎？

Answer 1

也許不是最好的算法在那裏，但我覺得你想要做這樣的事情：

var dates = []; 
var rows = []; 
for (var key in this.props.data) { 
    if (this.props.data.hasOwnProperty(prop)) { 
    dates.push(<Dates key={key} />); 

    if(dates.length === 5) { 
     rows.push(
     <div> 
      {dates} 
     </div> 
    ); 

     dates = []; 
    } 
    } 
} 

// final step 
rows.push(
    <div> 
    {dates} 
    </div> 
); 

Answer 2

上述答案的工作，所以這真的只是代碼高爾夫，但這裏是我的裂紋它。使用forEach可以讓您不用擔心索引計算錯誤，代碼會佔用最後一行非完整行。

var newArr = [], row=[], rowLength=5; 
this.props.data.forEach((item, index) => { 
    row.push(item); 
    if ((row.length === rowLength) || index === this.props.data.length - 1) { 
    newArr.push(<div>{row}</div>); 
    row = []; 
    } 
})