2

我有一个简单的 React 应用程序，带有视频播放器和显示视频数据的图表。两者都在自己的顶层组件中：

class App extends Component {
  ...
  render() {
    return (
      <div className="App">
        <VideoDisplay .../>
        <MetricsDisplay .../>
      </div>
    )
  }
}

Inside是我想要控制VideoDisplay.js的一个元素，特别是通过寻找它的播放位置，我可以使用. 我想从元素中控制它：如果我点击图表，我希望视频搜索到点击的时间。但要做到这一点，似乎我必须在它收到来自的点击时调用一个函数。但这是必要的而不是声明性的，而且确实我在 React 中实现它时遇到了麻烦。甚至可能吗？我怎么能告诉一个元素中的视频寻找，由来自同级元素的点击触发？<video>videoElement.currentTime=seekToTimeMetricsDisplayVideoDisplay.jsApp.jsMetricsDisplay.js

我有一个解决方法，我将发布作为答案，但我非常相信从设计角度来看它是非常次优的，并且会导致代码维护问题。那么有什么更好的方法呢？做这样的事情的“反应”方式是什么？

见所附截图：当点击右边的图表时，视频应该搜索到点击的时间点。

视频和指标截图

4

1 回答 1

0

所以为了解决这个问题，我可以在道具中传递一个搜索时间，并防止它重复搜索，我可以增加一个seekId计数器。这似乎非常倒退，既是因为我正在使用旨在避免它的声明性逻辑重新创建命令式逻辑，而且因为我指出视频元素具有我希望视频寻找的位置的持久“属性”到现在和执行此操作的命令的 id。

也就是说，我MetricsDisplay使用以下函数响应来自元素的单击App.js：

class App extends Component {
  ...
  setPlayheadTime(time) {
    this.setState((state, props) => ({seekTo: time, seekId: state.seekId + 1}));
  }
  ...
}

我将两者都传递给seekTo并在生命周期函数中处理它：seekIdVideoDisplayMetricsDisplay.js

class VideoDisplay extends Component {
  ...
  componentWillUpdate() {
    if (this.props.seekTo && this.props.seekId !== this.seekId) { this.seekTo(this.props.seekTo); }
  }

  seekTo(time) {
    console.log(`(${this.props.seekId}) Seek to ${time}`);
    this.seekId = this.props.seekId;
    document.getElementById("the-video").currentTime = time;
  }
  ...
}

这行得通，但我不得不相信这不是完成“普通”javascript中简单回调函数的最佳方法。有什么建议么？我错过了什么？

于 2019-02-28T22:55:56.997 回答