reactjs在数组上迭代并在每个第n个元素上放置包装div

问题描述

我正在使用材料ui网格系统进行反应。我有一团json-并希望每第4个元素创建一行。因此，它每隔第4个元素包装一次容器-也能够控制第n个元素包装-因此，如果他们希望连续每隔2、3个元素进行配置，则可以对其进行配置。

类似的东西

HandMenuLayoutExamples

解决方法

将列表切片为子列表，然后在其上进行映射。

这里是您的整洁mapInSlices助手。

const posts = [1,2,3,4,5,6,7,8,9,10,11,12,13,14];

function mapInSlices(array,sliceSize,sliceFunc) {
  const out = [];
  for (var i = 0; i < array.length; i += sliceSize) {
    const slice = array.slice(i,i + sliceSize);
    out.push(sliceFunc(slice,i));
  }
  return out;
}

const App = () => (
  <main>
    {mapInSlices(posts,(slice) => (
      <div>
        {slice.map((post) => (
          <span>{post}</span>
        ))}
      </div>
    ))}
  </main>
);

ReactDOM.render(<App />,document.getElementById("root"));

div {
  border: 1px solid orange;
  padding: .5em;
  margin: .5em;
}

span {
  margin: 1em;
  padding: .5em;
  background: cyan;
  display: inline-block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script>
<main id="root"></main>

,

您可以使用React.createElement实现这一目标

{
  blogJson.map((item,j) => {
    return React.createElement(
      j % 4 === 0 ? Grid : React.Fragment,j % 4 === 0 ? { container: true,spacing: 1 } : {},<Grid key={j} item xs={12} sm={3}>
        <Card className="blog-card">
          <CardContent>
            <img src={item.image} alt="" />
            <h3>{item.label}</h3>
            {item.body}
          </CardContent>
          <CardActions>
            <IconButton aria-label="add to favorites">
              <FavoriteIcon className="icon-heart" />
            </IconButton>
          </CardActions>
        </Card>
      </Grid>
    )
  })
}