React - アイテムまたは親の状態を変更しますか？

Question

私は最初のreactjsプロジェクトに取り組んでいます。これは、ビデオの再生リストですので、これは私が私のプロジェクト

今

- Component Playlist Box (just a wrapper for the playlist 
-- Component Playlist (the list of video) 
--- Component Video (single video) 

の一部を構造化する方法、私はビデオコンポーネントをクリックするたびに、それはその「演奏」をtrueに状態であるものを変更する必要がありますされますその瞬間に再生する（存在する場合） "再生中"の状態をfalseに変更する必要があります。

クリックした動画コンポーネントの状態を変更して再生し、再生中の動画の状態も変更するか、再生リストコンポーネントの統計情報を変更する方が良いいくつかのパラメータに応じてすべてのビデオアイテムをレンダリングし、リストコンポーネントに渡しますか？これを管理する最良の方法は何ですか？

Answer 1

特定の状態を保存する場所を決定するときは、階層内の最も内側のコンポーネント（この場合はコンポーネントビデオ）から始め、「このコンポーネントはこの状態を知る必要がありますか」と尋ねます。

コンポーネントビデオは独自の再生状態を知る必要がありますか？絶対に。 ;）1つ上のレベル、コンポーネントプレイリストはどうですか？コンポーネントプレイリストが、コンポーネントビデオが再生されているかどうかを気にするものがレンダリングされていない場合は、コンポーネントビデオに再生状態を入れます。

例：再生中の場合にのみ、単一のビデオコンポーネントで点滅する光線をレンダリングしているとします。しかし、プレイリストの唯一の仕事は、単一のビデオを一覧表示することであり、ビデオが再生されているかどうかは関係ありません。その場合、状態をビデオコンポーネントに置くのが理にかなっています。

一方、プレイリストが現在再生中のビデオの名前を示すテキストをレンダリングしたとします。それから、プレイリストに状態を格納することは理にかなっています。例：

class PlayList extends React.Component { 
    constructor(props) { 
    super(props); 

    this.videoPlay = this.videoPlay.bind(this); 
    this.videoStop = this.videoStop.bind(this); 

    this.state = { 
     playingVideoName: '', 
    }; 
    } 

    videoPlay(name) { 
    this.setState({ playingVideoName: name }); 
    } 

    videoStop() { 
    this.setState({ playingVideoName: '' }); 
    } 

    renderVideoList() { 
    // begin loop 
     <Video id={someId} onPlay={this.videoPlay} onStop={this.videoStop} 
    // end loop 
    } 

    render() { 
    return <div> 
     {this.renderVideoList()} 

     <div> 
     Currently playing: {this.state.playingVideoName} 
     </div> 
    </div> 
    } 
}