什麼是改變React中播放視頻的最佳方式

Question

我正在製作一個頁面，用於在我的公司中顯示一些內部視頻。有五個短視頻，所以我想讓左邊的視頻播放器和右邊的播放列表，就好像YouTube一樣。

但是，我希望能夠點擊右側的視頻，然後左側的視頻會隨着視頻播放器下的一些元數據（標題和說明）而相應改變。

我想實現的是當播放列表組件項被點擊時，它應該傳播到父組件並向下傳播到視頻組件。

目前我的代碼看起來是這樣的：

const videos = [{ 
    'title' => 'Lorem ipsum', 
    'short_desc' => '', 
    'long_desc' => '', 
    'url' => 'videofile.mp4', 
    'thumbnail' => 'thumb.jpg', 
    'length': 55 
},{ 
    'title' => 'Lorem ipsum 2', 
    'short_desc' => '', 
    'long_desc' => '', 
    'url' => 'videofile2.mp4', 
    'thumbnail' => 'thumb2.jpg', 
    'length': 72 
}]; 

class App extends Component { 
    constructor() { 
     super(); 

     this.state = { 
      videos: videos, 
      source: videos[0] 
     } 
    } 

    changeVideo(video) { 
     // Some logig for changing video 
    } 

    render() { 
     let playlist = this.state.videos.map((video, index) => <Playlist key={shortid.generate()} details={video} changeVideo={this.changeVideo.bind(this)} />) 

     let video = <Video ref="player" source={this.state.source} /> 

     return(
      <div className="app"> 
       <section className="left"> 
        {video} 
       </section> 
       <section className="right"> 
        {playlist} 
       </section> 
      </div> 
     ) 
    } 
} 

class Playlist extends Component { 
    handleClick(e) { 
     this.props.changeVideo(this); 
    } 

    render() { 
     let {title, length, short_desc, long_desc, thumbnail} = this.props.details; 
     return(
      <div className="playlistItem" onClick={this.handleClick.bind(this)}> 
       <img src={thumbnail} /> 
       {title} 
       {short_desc} ({length}) 
      </div> 
     ) 
    } 
} 

class Video extends Component { 
    changeVideo(video) { 
     // change video 
    } 

    render() { 
     return { 
      <section className="playerArea"> 
       <Player 
        ref="player" 
        poster={this.props.source.thumbnail} 
        src={this.props.source.url}> 
        <LoadingSpinner /> 
        <BigPlayButton position="center" /> 
       </Player> 
       <h1>{this.props.source.title}</h1> 
       <p>{this.props.source.long_desc}</p> 
      </section> 
     } 
    } 
} 

我使用的視頻播放器是video-reactjs包。

Answer 1

在應用：

constructor(props) { 
    ... 
    this.changeVideo = this.changeVideo.bind(this); 
} 

changeVideo(index) { 
    this.setState({ source: this.state.videos[index] }); 
} 

render() { 
    let playlist = this.state.videos.map((video, index) => <Playlist key={index} details={video} changeVideo={this.changeVideo.bind(null, index)} />) 
    ...remaining code... 

在播放列表：

class Playlist extends Component { 
    render() { 
    let {title, length, short_desc, long_desc, thumbnail} = this.props.details; 
    return(
     <div className="playlistItem" onClick={this.props.changeVideo}> 
      <img src={thumbnail} /> 
      {title} 
      {short_desc} ({length}) 
     </div> 
    ); 
    } 
} 

編輯：替代的解決方案，具有changeVideo顯式綁定。