javascript - 我可以使用HTML5音频元素通过React Hooks在功能组件中播放声音文件吗？

我使用功能组件和React Hooks构建了一个计时器。当计时器到达00:00时，将播放音频剪辑。我当前的代码使用新的Audio()起作用。这是一个示例:

const Timer = () => {
   const [myAudio] = useState(new Audio(soundfile));

   const handleBeep = () => {
      myAudio.play();
   }

它可以工作，但未通过FCC测试，因为我应该使用HTML5标签。我尝试使用useRef()钩子(Hook)来选择音频文件。但是，myAudio无法识别为音频对象:

   const myAudio = useRef();

   const handleBeep = () => {
      myAudio.play();
   }

return (
   <div>
   <audio id='beep' ref={myAudio} src={soundfile} type='audio'/>
   </div>

我之前在类组件中使用了ref作为标签，我想知道是否可以通过功能组件中的React Hooks来实现。我不希望为了通过测试而完全重组我的代码，因此任何输入都将是有帮助的。

最佳答案

如注释中所述，React.useRef返回具有以下接口(interface)的对象:

interface ReactRef<T> {
  current: null | T
}

其中T是您希望为其捕获引用的值的类型。 docs here中提到了这一点。

因此，myAudio.play()不起作用的原因是您需要使用myAudio.current.play()访问ref。

还建议确保您处理null情况，例如

if (myAudio.current !== null) {
  myAudio.current.play()
}