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 = [];
  }
})

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

2 个答案: