我如何告诉React中的一个子元素去寻找它的video元素？
我有一个简单的反应应用程序与视频播放器和图表显示有关视频的数据。这两个组件都位于自己的顶级组件中：
class App extends Component {
...
render() {
return (
<div className="App">
<VideoDisplay .../>
<MetricsDisplay .../>
</div>
)
}
}在VideoDisplay.js中有一个我想要控制的<video>元素，特别是通过寻找它的播放位置，我可以使用videoElement.currentTime=seekToTime来实现这一点。我想从MetricsDisplay元素来控制这一点:如果我点击图表，我希望视频搜索到点击的时间。但要做到这一点，似乎我必须从App.js中调用VideoDisplay.js中的函数，当它收到来自MetricsDisplay.js的点击时。但这是必须的，而不是声明性的，实际上我在React中实现这一点时遇到了麻烦。这有可能吗？否则我如何告诉元素中的视频去寻找，由同级元素的点击触发？
我有一个解决办法，我会把它作为答案发布出来，但我非常确信，从设计的角度来看，它是相当不理想的，并且会引起代码维护的头疼问题。那么什么是更好的方法呢？什么是"React“方式来做这样的事情？
查看附件截图:当单击右侧的图表时，视频应及时查找到所单击的时间点。
回答 1
Stack Overflow用户
发布于 2019-03-01 06:55:57
因此，为了解决这个问题，我可以在道具中传递一个寻道时间，为了防止它重复寻道，我可以增加一个seekId计数器。这看起来非常倒退，这是因为我正在使用旨在避免它的声明式逻辑重新创建命令式逻辑，也因为我正在指示video元素具有一个持久的“属性”，即我希望视频现在查找的位置和命令的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中简单回调函数的最好方法。有什么建议吗？我遗漏了什么？
https://stackoverflow.com/questions/54935539
复制相似问题