React表如何​​使用map循环显示每行3个项目

Question

使用材质UI表，我当前的表在每一行上生成一列。我想在每行显示3列作为项目，下面是我的表格地图：

<TableBody>
    {this.props.data.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage).map(n => {

        return (
            <TableRow key={n.id}>
                <TableCell>
                {n.title}
                </TableCell>
            </TableRow>
        );
    })}
</TableBody>

因此结果应显示：<tr><td>data1</td><td>data2</td><td>data3</td><tr>而不是此<tr><td>data1</td><tr>

Answer 1

这是未经测试的，但您可以预处理数据，将其分组 [[1,2,3], [4,5,6]]等，并映射内部三元组。

{this.props.data
   .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
   .reduce((acc, curr, i) => {
     // Every 3rd element, flush currGrp and append it to groupedData
     if (i > 0 && i % 3 === 0) {
       return {currGrp:[curr], groupedData: [...groupedData, acc.currGrp]}
     }
     return {currGrp: [...acc.currGrp, curr], groupedData: acc.groupedData }
   }, {currGrp: [], groupedData: []})
   .groupedData
   .map(group => 
      <TableRow key={n.id}>
        {group.map(g => 
          <TableCell>
            {g.title}
          </TableCell>
        )}
      </TableRow>
    )}
}