如何使用map()将数组渲染为指定行列数的多行列布局？

可以实现，最清晰的实现方式是先将一维数组按每行的元素数量拆分为二维数组，再通过双层map渲染行列结构，具体实现如下：

步骤1：拆分一维数组为二维分组 #

首先将原数组按每2个元素为一组进行拆分，得到4个分组对应4行：

let thisArray = [1,2,3,4,5,6,7,8];
const columnCount = 2; // 每行固定2列，后续调整列数直接改这个值即可
const chunkedArray = [];

for (let i = 0; i < thisArray.length; i += columnCount) {
  chunkedArray.push(thisArray.slice(i, i + columnCount));
}
// 拆分后chunkedArray结构为 [[1,2],[3,4],[5,6],[7,8]]

步骤2：双层map渲染布局 #

外层遍历每个分组渲染行容器，内层遍历分组内的元素渲染列元素：

// React 渲染示例
return (
  <>
    {chunkedArray.map((rowItems, rowIndex) => (
      <div className='numberRow' key={rowIndex}>
        {rowItems.map((num, colIndex) => (
          <div className='numberCol' key={`${rowIndex}-${colIndex}`}>{num}</div>
        ))}
      </div>
    ))}
  </>
)

补充说明 #

• 如果不想提前拆分数组，也可以直接在原数组的map中通过索引判断是否需要换行，但这种方式会产生多余的空节点，可读性和可维护性都不如拆分数组的方案，更推荐上面的实现方式。
• 示例中用索引作为key仅为演示，如果业务场景中元素有唯一标识，建议替换为唯一id作为key值，避免渲染异常。

内容的提问来源于stack exchange，提问作者LatePayment