在React中每x个项目插入一个图像

Question

我有一个项目列表，需要每10个项目之间渲染一个图像。 项目应在2d网格中呈现，图像应显示在新行中。

应该是这样的：

Answer 1

这是我认为可以使用的一种解决方案：

<div id="container" style={{display: 'flex', flexDirection: 'row', flexWrap: 'wrap'}}>
{arrayList.map((listItem, index) => {
  const cardinalIndex = index + 1;
  const item = !(cardinalIndex % 10) ? (
    <React.Fragment>
      <div id="item" style={{flex: '1 1 25%'}}>
        {listItem}
      </div>
      <img style={{flex: '1 1 100%'}} src="" />
    </React.Fragment>
  ) : (
    <div id="item" style={{flex: '1 1 25%'}}>
      {listItem}
    </div>
  );
  return item;
})}

Answer 2

//itemList is your array

let temp = [];

while (itemList.length > 0) {
  temp.push(itemList.splice(0, 10));
}

let res = [];
temp.forEach(e => {
  res = [...res, ...e, 'new item here'];
});

//res is your output array with inserted elements

这是工作示例：https://jsfiddle.net/tkr1d8vg/