React JS中仅单媒体时禁用轮播的代码修改需求

需求：当只有单张图片或单个视频时，直接展示媒体内容；数量多于1时，使用Carousel轮播组件。

修改思路 #

1. 先把当前post对应的媒体项单独过滤出来，方便后续判断数量
2. 根据过滤后的媒体项数量，分支渲染不同内容：
   • 无媒体：返回空占位
   • 单个媒体：直接渲染对应的图片/视频（无需Carousel）
   • 多个媒体：正常渲染Carousel组件

修改后的代码 #

// 缓存当前post对应的媒体项，避免重复过滤计算
const filteredGallery = gallery?.filter(item => item.postid === post.id) || [];

return (
  <>
    {filteredGallery.length === 0 ? (
      <></>
    ) : filteredGallery.length === 1 ? (
      // 单个媒体直接展示，不用轮播组件
      <center>
        {filteredGallery[0].type === "video" ? (
          <video controls>
            <source src={`/images/${filteredGallery[0].name}`} type="video/mp4" />
          </video>
        ) : (
          <img
            src={`/images/${filteredGallery[0].name}`}
            alt={filteredGallery[0].name}
          />
        )}
      </center>
    ) : (
      // 多个媒体时渲染轮播组件
      <Carousel variant="dark" interval={null}>
        {filteredGallery.map(galleryitem => (
          <Carousel.Item key={galleryitem.id}>
            <center>
              {galleryitem.type === "video" ? (
                <video controls>
                  <source src={`/images/${galleryitem.name}`} type="video/mp4" />
                </video>
              ) : (
                <img
                  src={`/images/${galleryitem.name}`}
                  alt={galleryitem.name}
                />
              )}
            </center>
          </Carousel.Item>
        ))}
      </Carousel>
    )}
  </>
);

代码说明 #

• 用filteredGallery变量缓存过滤后的媒体项，减少重复计算
• 通过length属性判断媒体数量，实现分支渲染逻辑
• 单个媒体时复用原有的图片/视频渲染逻辑，但移除了轮播相关的嵌套组件，直接展示内容
• 保留了原有的居中布局、媒体路径和控制属性，保证样式与原有功能一致

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