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

Question

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

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

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

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

   const myAudio = useRef();

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

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

我之前在类组件中使用 ref 作为标签，我想知道是否有办法在功能组件中使用 React Hooks 来做到这一点。我不想为了通过测试而完全重构我的代码，因此任何输入都会有所帮助。

Answer 1

如评论中所述，React.useRef返回具有以下接口的对象：

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

whereT是您希望为其捕获引用的值的类型。此处的文档中提到了这一点。

所以myAudio.play()不起作用的原因是您需要使用myAudio.current.play().

还建议确保您处理null案件时执行以下操作

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