javascript - React 使用 for 循环在每个 div 中追加 5 个项目

Question

我有这个 Prop 循环，可以推送并显示 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>
);