Блог

У меня есть список фильмов, которые я получил из API, и я отобразил их с помощью метода карты, я пытаюсь работать над опцией, при наведении курсора на одну из карточек я хочу показать трейлер этого конкретного фильма вместо изображения. Проблема, с которой я сталкиваюсь, заключается в том, что при наведении курсора трейлер видео воспроизводится на всех картах, я хотел бы знать, как я могу воспроизвести это видео при наведении для определенной карты.

Компонент моей карты

 const MovieCard = ({moviesList}) => {
    const [isHover, setIsHover] = useState(false);
    const trailer =
    "https://player.vimeo.com/external/371433846.sd.mp4?s=236da2f3c0fd273d2c6d9a064f3ae35579b2bbdfamp;profile_id=139amp;oauth2_token_id=57447761";
    return (
       moviesList.map((singleMovie)=> {
           const {id , title, poster_path, overview} = singleMovie;
            return (
               <article key={id} className="card"
                onMouseEnter= {()=> setIsHover(true)}
                onMouseLeave={()=> setIsHover(false)}>
                   <img src={`${ImgPath}`   poster_path} alt={title} className="image"/>
                   {isHover amp;amp; <video src={trailer} autoPlay={true} loop></video>}
                   <div className="body-card">
                   <h1>{title}</h1>
                   <p>{`${overview.substring(0,200)}...`}</p>
                   </div>
                   
               </article>
            )
       })
          
    )
}
 

экспорт карты MovieCard по умолчанию

Вместо boolean флага вы можете хранить id и, честно говоря, эта функциональность должна быть у отдельного Card пользователя, и вы должны отображать ее Card в цикле.

Вот как вы можете это сделать в той же реализации.

 const MovieCard = ({moviesList}) => {
    const [selected, setSelected] = useState(null);
    const trailer =
    "https://player.vimeo.com/external/371433846.sd.mp4?s=236da2f3c0fd273d2c6d9a064f3ae35579b2bbdfamp;profile_id=139amp;oauth2_token_id=57447761";
    return (
       moviesList.map((singleMovie)=> {
           const {id , title, poster_path, overview} = singleMovie;
            return (
               <article key={id} className="card"
                onMouseEnter= {()=> setSelected(id)}
                onMouseLeave={()=> setSelected(null)}>
                   <img src={`${ImgPath}`   poster_path} alt={title} className="image"/>
                   {selected === id amp;amp; <video src={trailer} autoPlay={true} loop></video>}
                   <div className="body-card">
                   <h1>{title}</h1>
                   <p>{`${overview.substring(0,200)}...`}</p>
                   </div>
                   
               </article>
            )
       })
          
    )
} 

Ваш компонент movieCard на самом деле не является компонентом movieCard. Потому что вы берете список фильмов в качестве реквизита, так что это компонент movieCardList. Вместо этого вы можете создать компонент movieCard, который отображает один элемент movieCard, и внутри этого компонента вы можете отдельно показывать видео с дорожкой.

     const movieCard =({movie} ) ={
  const handleTrailerShow = () =>{} 
return <div onSomeEvent={handleTrailerShow} >
  .... 
 </div>
}
 

И в вашем основном компоненте

 const movieCardList =({movieList} ) ={
    return movieList.map(movie=>
<MovieCard movie={movie} />

 }