反应表如何使用地图循环每行显示3个项目

【问题标题】：React table how to show 3 items each row using map loop反应表如何使用地图循环每行显示3个项目
【发布时间】：2018-04-16 22:23:29
【问题描述】：

使用材质 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>

【问题讨论】：

你使用的是material-ui@next还是v0？
material-ui@next

标签： javascript reactjs material-ui

【解决方案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>
    )}
}

【讨论】：