我如何告诉 React 中的子元素去寻找它的视频元素？

Question

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

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

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

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

见附件截图：点击右图时，视频应该会搜索到点击的时间点。

Answer 1

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

也就是说，我用App.js中的这个函数来响应来自MetricsDisplay元素的点击：

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

我将seekTo 和seekId 都传递给VideoDisplay 并在MetricsDisplay.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 中简单回调函数的最佳方式。有什么建议么？我错过了什么？