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

我在react中使用了materialui网格系统。我有一块json——并且希望每4个元素创建一行。因此，它每4个元素包装一次容器——还可以控制第n个元素包装——因此，如果他们希望每2、3个元素包装一次，就可以对其进行配置

像这样的

let blogJson = [{
  "label" : "Dress up or down",
  "body" : "<p>xxx</p>",
  "image" : "https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcS1q3hgINIvT2lxrLXVMoDlHt92bjqmU9SPHQ&usqp=CAU"
},{
  "label" : "yyyyyyy",
  "body" : "<p>xxx</p>",
  "image" : "https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcS1q3hgINIvT2lxrLXVMoDlHt92bjqmU9SPHQ&usqp=CAU"
},{
  "label" : "nnnnnnnnnnn",
  "body" : "<p>xxx</p>",
  "image" : "https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcS1q3hgINIvT2lxrLXVMoDlHt92bjqmU9SPHQ&usqp=CAU"
},{
  "label" : "vvvvvvvvvv",
  "body" : "<p>xxx</p>",
  "image" : "https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcS1q3hgINIvT2lxrLXVMoDlHt92bjqmU9SPHQ&usqp=CAU"
}]




      {            
        blogJson.map((item, j) => {
          return(
              
             {j % 4 === 0? '<Grid container 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>

            {j % 4 === 0? '</Grid>'}

          )
        })   
      }

让blogJson=[{
“标签”：“穿上或穿下”，
“正文”：“xxx
”，
“图像”：https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcS1q3hgINIvT2lxrLXVMoDlHt92bjqmU9SPHQ&usqp=CAU"
},{
“标签”：“yyyyyy”，
“正文”：“xxx
”，
“图像”：https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcS1q3hgINIvT2lxrLXVMoDlHt92bjqmU9SPHQ&usqp=CAU"
},{
“标签”：“nnnnnnnnnnnnnnnn”，
“正文”：“xxx
”，
“图像”：https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcS1q3hgINIvT2lxrLXVMoDlHt92bjqmU9SPHQ&usqp=CAU"
},{
“标签”：“VVVV”，
“正文”：“xxx
”，
“图像”：https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcS1q3hgINIvT2lxrLXVMoDlHt92bjqmU9SPHQ&usqp=CAU"
}]
{            
blogJson.map（（项，j）=>{
返回(
{j%4==0？''}
{item.label}
{item.body}
{j%4==0？''}
)
})   
}

您可以使用

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

{
blogJson.map（（项，j）=>{
返回React.createElement(
j%4==0？网格：React.Fragment，
j%4==0？{容器：true，间距：1}:{}，
{item.label}
{item.body}
)
})
}

您可以使用

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

{
blogJson.map（（项，j）=>{
返回React.createElement(
j%4==0？网格：React.Fragment，
j%4==0？{容器：true，间距：1}:{}，
{item.label}
{item.body}
)
})
}

---

将列表切分为子列表并映射到子列表上

这里有一个整洁的

mapInSlices

帮助程序

const posts=[1,2,3,4,5,6,7,8,9,10,11,12,13,14]；
函数mapInSlices（数组、切片大小、切片函数）{
常数输出=[]；
对于（变量i=0；i(
{mapInSlices（posts，4，（slice）=>(
{slice.map（（post）=>(
{post}
))}
))}
);
render（，document.getElementById（“根”））
div{
边框：1px实心橙色；
填充：.5em；
边缘：.5em；
}
跨度{
边缘：1米；
填充：.5em；
背景：青色；
显示：内联块；
}
将列表分割成子列表并映射到它们上

这里有一个整洁的
mapInSlices
帮助程序


const posts=[1,2,3,4,5,6,7,8,9,10,11,12,13,14]；
函数mapInSlices（数组、切片大小、切片函数）{
常数输出=[]；
对于（变量i=0；i(
{mapInSlices（posts，4，（slice）=>(
{slice.map（（post）=>(
{post}
))}
))}
);
render（，document.getElementById（“根”））
div{
边框：1px实心橙色；
填充：.5em；
边缘：.5em；
}
跨度{
边缘：1米；
填充：.5em；
背景：青色；
显示：内联块；
}

将数组切片为4个长度的片段并映射到这些片段上。您有一个示例吗？添加了该效果的答案。将数组切片为4个长度的片段并映射到这些片段上。您有一个示例吗？添加了该效果的答案。@TheOldCounty检查此@TheOldCounty检查此