React组件中基于Reducer返回行数动态创建Div元素的实现方案咨询

嘿，我来帮你搞定这个动态生成Carousel元素的问题！目前你的组件依赖静态的firstTitle、secondTitle这类props，要改成根据行数动态渲染，我们可以通过重构props结构+数组遍历渲染来实现，具体步骤如下：

1. 重构组件的调用方式 #

首先把原来拆分的firstTitle、firstValue、secondTitle、secondValue换成直接传入完整的rows数组，这样不管有多少行数据，组件都能灵活处理：

// main.js 中的调用代码修改为：
<BMCarouselComponent 
  icon={<ViewAgenda />} 
  rows={props.otherInventoryPayload?.rows || []} 
/>

这里用|| []做了空值处理，避免rows为undefined时遍历出错。

2. 修改组件内部的动态渲染逻辑 #

接下来把组件里静态的Carousel.Item替换成map遍历rows数组生成的动态项，完整的返回部分代码如下：

return (
  <Carousel 
    prevIcon={<span aria-hidden="true" style={{width:"15px",height:"15px"}} className="carousel-control-prev-icon" />} 
    nextIcon={<span aria-hidden="true" style={{width:"15px",height:"15px"}} className="carousel-control-next-icon" />} 
    activeIndex={index} 
    onSelect={handleSelect} 
    interval={null}
  >
    {/* 遍历rows数组生成每个Carousel.Item */}
    {props.rows.map((row, idx) => (
      <Carousel.Item key={idx}>
        <div className={classes.icon}>
          {props.icon}
        </div>
        <Box style={props.style} className={classes.carousel} />
        <Carousel.Caption>
          <div className="container">
            <div className="row">
              <div className="col-lg3 col-sm-6 col-xs-12 d-flex">
                <div className="mr-5">
                  {/* 从当前row中取出对应字段，这里假设你的title是按序号生成，若row自带title字段可替换为row.title */}
                  <Typography className={classes.typography}>
                    {`TEST${idx + 1}`}
                  </Typography>
                  <Typography className={classes.valueTypography}>
                    {row.Amount}
                  </Typography>
                </div>
              </div>
            </div>
          </div>
        </Carousel.Caption>
      </Carousel.Item>
    ))}
  </Carousel>
);

关键细节说明： #

• key属性：map遍历生成元素时一定要加唯一的key，这里用数组索引idx是最简单的方式，如果你的row有唯一ID（比如row.id），用ID会更稳妥。
• 字段适配：如果你的rows里包含title字段（比如row.title），可以直接替换掉示例中的TEST${idx + 1}，完全贴合你的数据结构。
• 空数据处理：如果rows是空数组，组件会自动不渲染任何Carousel.Item，你也可以加个兜底逻辑，比如：

{props.rows.length === 0 ? (
  <Carousel.Item>
    <div className="text-center">暂无数据</div>
  </Carousel.Item>
) : (
  props.rows.map(...)
)}

这样改造后，你的组件就能根据rows数组的长度自动生成对应数量的Carousel.Item，完全不需要手动添加thirdTitle、fourthTitle这类静态props啦！

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