Question

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

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

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

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

这里发生了什么以及为什么第一次没有正确呈现新录音的想法？

Answer 1

根据此question，显然问题是audio.load()应在audio.src更改后调用，否则它不会检测到＃34}。改变。如果这是您唯一的问题，那么解决方案就是：

解决方案

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

这一点非常重要，因为我们会在每次重新呈现组件时调用this.refs.audio.load()，并且在重新呈现时出于audio道具以外的原因而不想调用它改变。还有其他解决办法，但为了简单起见，我们坚持使用这个。如果您当前的音频组件有其他道具，请务必将其隔离在单独的组件中。

2）在音频标签

中渲染参考号

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();
}