React中如何实现每4个产品为一组用card-group包裹循环渲染

实现思路 #

你需要先把拉取到的一维产品数组，按每4项为一组拆分成二维数组，之后通过双层循环渲染即可符合布局要求：

• 外层循环遍历拆分后的二维数组，每个元素对应一个card-group容器
• 内层循环遍历每个分组内的产品条目，渲染单个产品卡片

修改后完整代码 #

import * as React from 'react';
import {connect} from 'react-redux'

// 通用数组分块工具函数
const chunkArray = (arr, chunkSize) => {
  const res = []
  for (let i = 0; i < arr.length; i += chunkSize) {
    res.push(arr.slice(i, i + chunkSize))
  }
  return res
}

const Urunler = (props) => {
  // 将产品数组按每4个一组拆分
  const productGroups = chunkArray(props.products || [], 4)

  return (
    <div className="row">
      <div className="col-md-12">
        {/* 遍历分组，每个分组渲染一个card-group */}
        {productGroups.map((group, groupIndex) => (
          <div className="card-group mt-5" key={groupIndex}>
            {/* 遍历分组内的产品，渲染卡片 */}
            {group.map(product => (
              <div className="card" key={product.id}>
                {/* 这里写你卡片内部的渲染逻辑，比如产品名、价格、图片等 */}
                <img src={product.resim} className="card-img-top" alt={product.urun_adi} />
                <div className="card-body">
                  <h5 className="card-title">{product.urun_adi}</h5>
                  <p className="card-text">价格：¥{product.fiyat}</p>
                </div>
              </div>
            ))}
          </div>
        ))}
      </div>
    </div>
  )
}

const mapStateToProps = (state) =>{
  return {
    products: state.urunler
  }
}
export default connect(mapStateToProps)(Urunler)

注意事项 #

如果产品总数不是4的整数倍，最后一个分组不足4个卡片也会正常渲染，不会出现布局异常。

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