Question

我刚刚开始做出反应，这是一个我到目前为止还没有看到好的解决方案的问题。问题是我想在用户点击按钮时将标签中的视频设置到某个位置。

我目前的解决方案如下：

componentDidUpdate(prevProps, prevState) {
    console.log("Updating to timestamp: " + this.props.timestamp);
    var timestamp = this.props.timestamp;
    if (timestamp != prevProps.timestamp) {
        React.findDOMNode(this.refs.theVideo).currentTime = timestamp;
    }
}

问题是，这看起来真的很糟糕。现在我处于这种情况，用户可以点击相同的按钮两次，什么都不会发生，所以我正在寻找为组件添加更多状态以确保案例正常工作。

这是正确的做法吗？到目前为止，所有反应似乎都是超级合乎逻辑的，但这并不是很正确。这会是你将孩子的方法暴露给父母的情况吗？

Answer 1

您在问题中触及了一个解决方案 - 您可以在子项上公开设置时间戳的方法。但是，这是一个非常必要的API，可能不适合以其他方式声明的应用程序。

在最近的一个项目中，我使用声明式API when I use Heroku to look at it, the app launches and works just fine实现了类似的功能，与您自己的解决方案非常相似：

componentWillReceiveProps: function(props) {
  if (this.props.playing !== props.playing) {
    this.audio[props.playing ? "play" : "pause"]();
  }

  if (this.props.lastSeek !== props.lastSeek) {
    var start = props.start,
        offset = props.currentTime - start;
    this.audio.currentTime = offset / 1000;
  }
}

通过比较上次使用给定属性渲染给组件的属性，我们可以确定需要调整音频剪辑时间。

我认为最好的解决方案是创建一个特殊的<Video>组件，其中唯一工作隐藏了声明性API背后的这种命令式API;那么，您的应用程序不需要了解命令式API。因此，在您的应用中，您可以使用

render() {
  // ...
  <Video url={...} timestamp={this.props.timestamp} />
}

您可以了解有关此概念的更多信息using componentWillReceiveProps（约7:04）。

React.js + video element：设置反应道具的当前播放时间？

1 个答案: