ReactJS 在首次渲染后无法正确渲染 HTML 音频

Question

我在 ReactJS 组件中有一个 HTML Audio 标签。为每个不同的音频文件渲染一个组件。组件第一次正确渲染时，会显示音频以及文件的长度，但是当我选择要渲染的另一个文件时，即使源代码指示了我选择的文件的路径，它也不会渲染。

<audio controls><source src={props.audio} type="audio/wav"></source></audio>

其中“props.audio”是音频文件的路径，此代码位于我的 ReactJS 组件内，每次用户选择不同的文件时都会呈现该组件。

例如，如果我有两个音频文件，一个5分钟长，第二个10分钟长，我选择第一个音频，则音频显示5分钟，我可以播放。但是，当我选择第二个音频文件时，音频标签不会重新渲染，并且仍然播放第一个音频文件。虽然当我检查源代码时，它确实是文件的正确路径。

这里发生了什么以及为什么它在第一次之后没有正确渲染新的音频记录有什么想法吗？

Answer 1

根据这个question，显然问题是

audio.load()

应该在

audio.src

更改后调用，否则它不会“检测”更改。如果这是您唯一的问题，那么解决方案如下：

解决方案

1）确保您的音频组件只有 1 个道具，即音频

这很重要，因为每次组件重新渲染时我们都会调用

this.refs.audio.load()

，并且我们不想在由于

audio

属性更改以外的原因重新渲染时调用它。还有其他解决方法，但为了简单起见，我们还是继续使用这个方法。如果您当前的 Audio 组件有其他 props，请务必将其隔离在单独的组件中。

2）渲染音频标签中的ref

render() {
    return <audio ref="audio"/>;
}

3）如果

audio

属性没有改变，则防止重新渲染

shouldComponentUpdate(nextProps, nextState) {
    return nextProps.audio != this.props.audio)
}

4）组件更新时调用

this.refs.audio.load

componentDidUpdate() {
    this.refs.audio.load();
}

Answer 2

找到this关于为什么会发生这种情况的规范说明。如果在您选择的 UI 框架内调用

audio.load()

导致渲染循环，请使用此解决方案。

..当元素被修改时修改源元素及其属性 已插入视频或音频元素的将不会产生任何效果。到 更改正在播放的内容，只需使用媒体上的 src 属性 直接元素

<audio>
    <source src='./first-src'/>
</audio>

更改源代码

<audio src='./second-src'/>
    <source src='./first-src'/>
</audio>

Answer 3

这是因为即使媒体元素内的源元素中的 src 属性发生更改，浏览器也不会重新渲染媒体元素。

这不是 React 的问题，而是浏览器行为的问题。

现在，您将 key 属性添加到音频元素，这会强制浏览器在 DOM 中创建一个新元素。