React中如何使用.map()或类似for循环的方式实现每两个Product组件包裹在一个div中的渲染

嘿，这个需求其实很容易实现，核心思路是先把products数组拆成每两个元素一组的子数组，再通过嵌套的map来渲染就好啦，完全不需要用for循环那种写法～

方法一：用辅助函数分组数组 #

先写一个通用的数组分组函数，把原数组按指定大小拆分：

// 把数组拆成每chunkSize个元素一组的子数组
const chunkArray = (arr, chunkSize) => {
  const chunks = [];
  for (let i = 0; i < arr.length; i += chunkSize) {
    chunks.push(arr.slice(i, i + chunkSize));
  }
  return chunks;
};

然后在你的组件里，先把products分组，再嵌套渲染：

function ProductList({ products }) {
  // 把products拆成两两一组
  const groupedProducts = chunkArray(products, 2);

  return (
    <div className="product-wrapper">
      {groupedProducts.map((productPair, pairIndex) => (
        {/* 每一组对应一个包裹div */}
        <div key={pairIndex} className="product-pair-container">
          {/* 渲染组内的每个Product组件 */}
          {productPair.map((product) => (
            <Product 
              key={product.id} // 这里尽量用product的唯一ID，别用index
              prop={product} 
            />
          ))}
        </div>
      ))}
    </div>
  );
}

方法二：用reduce直接分组（不用额外函数） #

如果不想单独写分组函数，也可以用数组的reduce方法直接在组件内完成分组：

function ProductList({ products }) {
  const groupedProducts = products.reduce((acc, currentProduct, index) => {
    // 偶数索引时，新建一个组
    if (index % 2 === 0) {
      acc.push([currentProduct]);
    } else {
      // 奇数索引时，把当前元素加到最后一个组里
      acc[acc.length - 1].push(currentProduct);
    }
    return acc;
  }, []);

  // 后面的渲染逻辑和方法一完全一样
  return (
    <div className="product-wrapper">
      {groupedProducts.map((productPair, pairIndex) => (
        <div key={pairIndex} className="product-pair-container">
          {productPair.map((product) => (
            <Product key={product.id} prop={product} />
          ))}
        </div>
      ))}
    </div>
  );
}

注意点 #

• 关于key：内层的Product组件一定要用每个product的唯一标识（比如id），不要用循环index，避免React渲染时出现错误；外层的分组div如果没有合适的唯一标识，用index暂时没问题，但如果分组有独立ID的话最好用那个。
• 兼容奇数长度：两种方法都能自动处理products数组长度为奇数的情况，最后一组只会渲染一个Product组件，不会出现越界报错。

这样写就完全符合React的函数式渲染风格，和你想要的for循环效果一模一样～

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