React组件开发：如何实现每行两列的产品列表布局

这问题我之前做列表布局时也碰到过，核心思路就是先把你的产品数组拆成每两个元素一组的子数组，然后嵌套渲染就行，具体修改步骤如下：

第一步：对原始数据进行分组处理 #

我们需要把一维的字符串数组，转换成每两个元素为一组的二维数组，比如["A","B","C","D"]变成[["A","B"], ["C","D"]]。你可以用简单的循环实现，或者用reduce方法：

// 方法1：循环分组（直观易懂）
const groupedProducts = [];
for (let i = 0; i < data.length; i += 2) {
  // 每次截取从i开始的2个元素
  groupedProducts.push(data.slice(i, i + 2));
}

// 方法2：用reduce分组（更函数式）
const groupedProducts = data.reduce((acc, curr, index) => {
  if (index % 2 === 0) {
    // 偶数索引时，新建一个包含当前元素的组
    acc.push([curr]);
  } else {
    // 奇数索引时，把当前元素加入最后一个组
    acc[acc.length - 1].push(curr);
  }
  return acc;
}, []);

第二步：修改渲染逻辑 #

现在用分组后的数组来渲染，外层map遍历每个组（对应一行），内层map遍历组内的产品（对应每行的列）：

<div className="container">
  {/* 遍历每个分组，每个分组对应一行 */}
  {groupedProducts.map((rowProducts, rowIndex) => (
    <div className="row" key={rowIndex}>
      {/* 遍历当前行的产品，每个产品对应一列 */}
      {rowProducts.map((product, colIndex) => (
        {/* 用行+列的索引组合作为key，避免重复 */}
        <div className="column" key={`row-${rowIndex}-col-${colIndex}`}>
          {product}
        </div>
      ))}
    </div>
  ))}
</div>

小提示 #

• 如果你的产品数量是奇数，最后一行会自动只显示一个产品列，这是正常的；如果需要视觉上对齐，可以给最后一行加个空的占位列，或者通过CSS调整布局。
• 尽量避免只用单一的index作为key，用行+列的组合索引会更稳妥（如果产品有唯一ID的话，用ID作为key是最佳实践）。

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