使用 for 循环在每个 div 中附加 5 个项目

Question

我有这个推送和显示 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 个项目，所以将它包装在每个 div 中的 5 个项目，例如 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 = [];
  }
})

使用 for 循环在每个 div 中附加 5 个项目

React append 5 items in each div using for loop

javascript

reactjs