显示两行和每行四个项目答案

【问题标题】：show two row and four items per row显示两行和每行四个项目
【发布时间】：2019-05-10 10:14:36
【问题描述】：

我想每行显示 4 个项目。我有一个如下标记。根据该标记，我需要显示四个单行中的项目。例如，如果我有 8 个数据，那么将有两行，每行包含 4 项。

如果我在<Grid gutters col="cols-4"> 之外循环，那么将有八个这样的元素，如果我循环在该元素内将有八个 Cell 元素。这种情况如何处理？

这是标记

const data = [
    {id: 1, header: 'header', content: 'content', footer: 'footer'},
    {id: 2, header: 'header', content: 'content', footer: 'footer'},
    {id: 3, header: 'header', content: 'content', footer: 'footer'},
    {id: 4, header: 'header', content: 'content', footer: 'footer'},
    {id: 5, header: 'header', content: 'content', footer: 'footer'},
    {id: 6, head/xer: 'header', content: 'content', footer: 'footer'},
    {id: 7, header: 'header', content: 'content', footer: 'footer'},
    {id: 8, header: 'header', content: 'content', footer: 'footer'},
]

<Grid gutters col="cols-4">
    <Grid.Cell key={datum.id}>
        <Card>
            <Card.Header>{datum.header}</Card.Header>
            <Card.Content>{datum.content}</Card.Content>
            <Card.Footer>{datum.footer}</Card.Footer>
        </Card>
    </Grid.Cell>
    <Grid.Cell>
    </Grid.Cell>
     <Grid.Cell>
    </Grid.Cell>
     <Grid.Cell>
    </Grid.Cell>
</Grid>
<Grid gutters col="cols-4">
    <Grid.Cell key={datum.id}>
        <Card>
            <Card.Header>{datum.header}</Card.Header>
            <Card.Content>{datum.content}</Card.Content>
            <Card.Footer>{datum.footer}</Card.Footer>
        </Card>
    </Grid.Cell>
    <Grid.Cell>
    </Grid.Cell>
     <Grid.Cell>
    </Grid.Cell>
     <Grid.Cell>
    </Grid.Cell>
</Grid>

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

首先，将数据分成每一行的块。试试这个：

let chunks = [];
const columns = 4;
while (data.length > 0) {
    chunks.push(data.splice(0, columns));
}

这将从data 数组中删除长度为4 的条目，并将它们放入一个多维数组中，如下所示：

[  
   [  
      {  
         "id":1,
         "header":"header",
         "content":"content",
         "footer":"footer"
      },
      {  
         "id":2,
         "header":"header",
         "content":"content",
         "footer":"footer"
      },
      {  
         "id":3,
         "header":"header",
         "content":"content",
         "footer":"footer"
      },
      {  
         "id":4,
         "header":"header",
         "content":"content",
         "footer":"footer"
      }
   ],
   [  
      {  
         "id":5,
         "header":"header",
         "content":"content",
         "footer":"footer"
      },
      {  
         "id":6,
         "header":"header",
         "content":"content",
         "footer":"footer"
      },
      {  
         "id":7,
         "header":"header",
         "content":"content",
         "footer":"footer"
      },
      {  
         "id":8,
         "header":"header",
         "content":"content",
         "footer":"footer"
      }
   ]

然后，您可以遍历每个数组以转储标记。

chunks.forEach(row => {
  return (
    <Grid gutters col="cols-4">
    {
      row.forEach(col => ({
         <Grid.Cell key={col.id}>
             <Card>
                 <Card.Header>{col.header}</Card.Header>
                 <Card.Content>{col.content}</Card.Content>
                 <Card.Footer>{col.footer}</Card.Footer>
             </Card>
         </Grid.Cell>
      }));
    }
    </Grid>
  )
});

这里的标记是伪代码，没有经过适当的测试，但希望你能明白。

【讨论】：

【解决方案2】：

创建一个 col span 为 4 的父 div，然后在数据数组的循环内创建 col span 为 1 的单元格组件。

【讨论】：