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

Question

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

应该是这样的:

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;
})}