React中点击卡片加载对应YouTube iframe的问题及定位咨询

一、解决点击卡片出现多个iframe的问题 #

你当前的问题是：所有卡片都会在videoUrl有值时渲染iframe，因为每个<Item>里都写了{videoUrl && <iframe...>}。要只显示点击的那张卡片对应的iframe，需要同时记录当前点击的卡片ID：

1. 新增状态变量记录激活的视频ID：

const [activeVideoId, setActiveVideoId] = useState(null);
const [videoUrl, setVideoUrl] = useState(null);

2. 修改点击事件，同时更新激活ID和视频链接：

const onClickVideo = async (id) => {
  // 替换成你实际的API调用逻辑
  const fetchedUrl = await getVideoUrlById(id); 
  setActiveVideoId(id);
  setVideoUrl(fetchedUrl);
};

3. 只在当前激活的卡片里渲染iframe：

<ItemList>
  {data.results.map((e) => (
    <Item key={e.id}>
      <img
        src={e.poster_path}
        alt={e.title}
        onClick={() => onClickVideo(e.id)}
      />
      {/* 仅当前item的id与激活ID匹配，且有视频链接时才显示 */}
      {activeVideoId === e.id && videoUrl && (
        <iframe src={videoUrl} width="300" height="200"></iframe>
      )}
    </Item>
  ))}
</ItemList>

二、自定义iframe显示位置 #

当然可以设置，分两种常见场景：

场景1：固定在页面全局位置（如弹窗、顶部/底部） #

把iframe从列表的<Item>中移出，放在页面指定容器里，通过状态控制显示：

// 页面结构示例
<div className="global-video-wrapper">
  {activeVideoId && videoUrl && (
    <iframe src={videoUrl} width="600" height="400"></iframe>
  )}
</div>

<ItemList>
  {data.results.map((e) => (
    <Item key={e.id}>
      <img
        src={e.poster_path}
        alt={e.title}
        onClick={() => onClickVideo(e.id)}
      />
    </Item>
  ))}
</ItemList>

用CSS控制容器位置，比如固定在页面中央：

.global-video-wrapper {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;
}

场景2：保留在卡片内，调整局部位置 #

直接通过CSS修改iframe在<Item>中的布局，比如放在图片下方、悬浮覆盖卡片：

/* 示例：放在图片下方 */
Item img {
  display: block;
}
Item iframe {
  margin-top: 12px;
}

/* 示例：悬浮覆盖卡片 */
Item {
  position: relative;
}
Item iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

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