React Hooks如何根据quantity prop属性值复制对应数量Div组件

核心逻辑是基于传入的quantity参数生成对应长度的数组，遍历渲染指定数量的Div组件即可，配合useMemo可以避免非必要的重复计算优化性能：

代码示例 #

1. 你已定义的Div组件（示例） #

// 你自己封装好的要重复渲染的Div组件
const CustomDiv = () => {
  return <div className="custom-block">我是待重复的Div元素</div>
}

2. 实现重复渲染的容器组件 #

import { useMemo } from 'react'

const MultiDivRenderer = ({ quantity }) => {
  // 仅当quantity变化时才重新生成渲染列表
  const renderList = useMemo(() => {
    // 对传入的quantity做兜底处理，避免非数字值报错
    const validCount = Number(quantity) || 0
    // 生成长度等于validCount的数组
    return Array.from({ length: validCount }, (_, idx) => idx)
  }, [quantity])

  return (
    <div className="wrapper">
      {renderList.map((index) => (
        // 每个重复项需要传入唯一key，业务场景有唯一ID优先用唯一ID
        <CustomDiv key={index} />
      ))}
    </div>
  )
}

3. 组件调用示例 #

// 要渲染6个Div就传入quantity={6}即可
<MultiDivRenderer quantity={6} />

补充说明 #

• 如果每个重复的Div需要传入不同的属性，可以直接在map循环中根据下标给对应组件传参
• 若quantity取值非常大（比如超过100），建议搭配虚拟滚动组件实现，避免一次性渲染过多DOM导致页面卡顿
• 可以根据业务需要给quantity加PropTypes校验，避免传入非法参数

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