React开发：如何在hover数组列表的指定卡片时仅播放对应影片预告片

你的isHover状态定义在列表组件的根层级，所有遍历生成的卡片共用这一个布尔状态，只要任意卡片触发hover修改状态，全部卡片的条件渲染判断都会命中，所以所有卡片都会同时显示预告片。

把单个电影卡片的逻辑抽成独立组件，每个组件自己维护自己的hover状态，互不干扰。

// 抽离独立的单张卡片组件，自己维护hover状态
const SingleMovieCard = ({singleMovie}) => {
  const [isHover, setIsHover] = useState(false);
  const {id , title, poster_path, overview} = singleMovie;
  // 后续可替换为当前电影对应的专属预告片地址，现在为示例值
  const trailer = "https://player.vimeo.com/external/371433846.sd.mp4?s=236da2f3c0fd273d2c6d9a064f3ae35579b2bbdf&profile_id=139&oauth2_token_id=57447761";
  return (
    <article className="card"
      onMouseEnter={()=> setIsHover(true)}
      onMouseLeave={()=> setIsHover(false)}>
      <img src={`${ImgPath}` + poster_path} alt={title} className="image"/>
      {/* 视频加muted属性适配浏览器自动播放规则，否则很多浏览器会拦截autoPlay */}
      {isHover && <video src={trailer} autoPlay loop muted></video>}
      <div className="body-card">
        <h1>{title}</h1>
        <p>{`${overview.substring(0,200)}...`}</p>
      </div>
    </article>
  )
}

// 原列表组件简化为遍历渲染子组件即可
const MovieCard = ({moviesList}) => {
  return (
    moviesList.map((singleMovie)=> <SingleMovieCard key={singleMovie.id} singleMovie={singleMovie} />)
  )
}
export default MovieCard

如果不想拆分组件，可以把状态从布尔值改为当前hover的电影ID，只有当前遍历的卡片ID和存储的hover ID一致时才显示预告片。

const MovieCard = ({moviesList}) => {
  // 初始为null，存储当前hover的电影ID
  const [hoveredId, setHoveredId] = useState(null);
  const trailer = "https://player.vimeo.com/external/371433846.sd.mp4?s=236da2f3c0fd273d2c6d9a064f3ae35579b2bbdf&profile_id=139&oauth2_token_id=57447761";
  return (
    moviesList.map((singleMovie)=> {
      const {id , title, poster_path, overview} = singleMovie;
      return (
        <article key={id} className="card"
          onMouseEnter={()=> setHoveredId(id)}
          onMouseLeave={()=> setHoveredId(null)}>
          <img src={`${ImgPath}` + poster_path} alt={title} className="image"/>
          {/* 只有当前卡片ID等于hover的ID时才显示视频 */}
          {hoveredId === id && <video src={trailer} autoPlay loop muted></video>}
          <div className="body-card">
            <h1>{title}</h1>
            <p>{`${overview.substring(0,200)}...`}</p>
          </div>
        </article>
      )
    })
  )
}
export default MovieCard

当前代码里预告片地址是写死的固定值，后续可以根据接口返回的每个电影对应预告片字段替换，就能实现不同卡片播放对应专属预告片的效果。

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