小编Tob*_*e O的帖子

在 React 中停止路由更改时的音频?

每个人。我仍然习惯于 React 和 React Router,这是我不知道的一件事。

所以,我有一个同时播放视频(静音)和音轨的应用程序。我正在使用React Player来播放两者。我的观点是这样的(VideoPlayer 是 react-player 标签):

<div>
    <VideoPlayer url={this.props.audio} playing={this.state.playing} />
    <VideoPlayer url={this.props.video} playing={this.state.playing} />
</div>
Run Code Online (Sandbox Code Playgroud)

这个设置对我有用,我能够通过一个共同的状态来播放和控制它们。我可以通过连接到按钮的事件处理程序阻止它们:

handleStop() {
    this.setState({playing: false})
}
Run Code Online (Sandbox Code Playgroud)

这也有效。

然而,问题是,一旦我导航到不同的路线,音频(可能还有视频)仍然在后台播放。实际上,让我换个说法,当我更改路线时,音频会在后台重新启动

从 react-router docs阅读此页面后,我尝试包含调用handleStop各种生命周期事件的逻辑,但没有一个能成功。到目前为止,我试图把调用handleStopcomponentWillReceivePropscomponentWillUpdatecomponentDidUpdatecomponentWillUnmount

我得到的最接近的是将调用放入componentWillUnmount,但我总是收到关于设置未安装组件状态的错误(这也没有意义,如果卸载之前调用?)。

那么,有没有人知道在哪里打电话给handleStop?

提前致谢。

javascript frontend reactjs react-router

0
推荐指数
1
解决办法
1537
查看次数

标签 统计

frontend ×1

javascript ×1

react-router ×1

reactjs ×1