javascript - 在 react js中悬停卡片时播放视频并在不悬停时显示默认图像

Question

我有一个视频列表。我只需要在悬停时播放视频。否则需要显示我提供的默认图像。

假设我有这样的编码。当我悬停卡片时，它需要播放视频，当我不悬停卡片时，它需要显示图像。

<Card>
     <video src={video} />
</Card>

我使用了 npm 包 react-hover-video-player，但我不使用外部包来执行此操作。有没有办法在 React JS (Typescript) 中做到这一点？

Answer 1

如何为悬停和有条件渲染创建一个新状态？

const [hover, setHover] = useState(false);

<Card
  onMouseEnter={(e:React.MouseEvent) => setHover(true)}
  onMouseLeave={(e:React.MouseEvent) => setHover(false)}
>
     {hover ? <video src={video} /> : <image src={image} />}
</Card>