Question

我想每行显示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>

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

这里的标记是伪代码，未经适当测试，但希望您能理解。

Answer 2

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

显示两行，每行显示四项

2 个答案: