反应 - 更改项目或父项的状态？

Question

我正在开发我的第一个reactjs项目。这是一个视频播放列表，所以这是我如何组织我的项目的一个组成部分现在

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

，我每次点击一个视频组件上的时候，它必须改变其“打”的状态为true，并且一个是在那一刻玩耍（如果有的话）必须将其“玩”状态改变为假。

这里是我的疑问： 最好是改变点击的视频组件的状态，以便它再次呈现，并且还改变播放视频状态，或者最好改变播放列表组件的状态，所以它根据我传递给列表组件的某些参数渲染每个视频项目？管理这个最好的方法是什么？

Answer 1

当决定存储特定状态的位置时，只需从层次结构中的最内层组件（在本例中为Component Video）开始，并询问“该组件是否需要了解此状态？”

那么Component Video需要知道它自己的播放状态吗？绝对。 ;）上一级的组件播放列表呢？如果Component Playlist没有渲染任何关心Component Video是否播放的内容，那么只需将Component的播放状态放在Component Video上即可。

就像一个例子：比方说，只有在播放单个视频组件时，您才会呈现闪烁的灯光。但播放列表唯一的工作是列出单个视频，而不关心视频是否正在播放。在这种情况下，将状态置于视频组件上是有意义的。

另一方面，让我们说，播放列表呈现了一些文本，指示当前正在播放的视频的名称。然后，将状态存储在播放列表中将是有意义的。例如：

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> 
    } 
}