Question

我正在开展第一个reactjs项目。它是一个视频播放列表，所以这就是我构建项目的一部分的方式

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

现在，每次点击视频组件时，都必须更改其播放＆＃34;状态为真，那个时刻正在玩的那个（如果有的话）必须改变它的＆＃34;播放＆＃34;陈述为假。

这是我的疑问：最好更改点击的视频组件的状态，使其再次渲染，并更改播放视频状态，或者最好更改播放列表组件的统计信息，以便根据某些参数i传递每个视频项目到列表组件？管理这个的最佳方法是什么？

Answer 1

在决定存储特定状态的位置时，只需从层次结构中最里面的组件开始（在本例中为组件视频），并询问＆＃34;该组件是否需要了解此状态？＆＃34;

Component Video需要了解自己的播放状态吗？绝对。 ;）一个级别，组件播放列表怎么样？如果组件播放列表没有呈现任何关于组件视频是否正在播放的内容，那么只需将播放状态置于分量视频上。

仅作为一个例子：让我们说，只有当它正在播放时，你才能在单个视频组件上呈现闪烁的光。但播放列表的唯一工作是列出单个视频，并不关心视频是否正在播放。在这种情况下，将状态放在视频组件上是有意义的。

另一方面，让我们说播放列表会呈现一些表示当前播放视频名称的文字。那么将状态存储在播放列表中是有意义的。 E.g：

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

React - 更改项目或父项的状态？

1 个答案: