Javascript audio.play不是使用ref的箭头功能组件的功能错误

我在做freeCodeCamp鼓机项目。当用户单击鼓垫时，我希望播放声音。因为audio元素不是真正的DOM元素，而是它的副本，所以要引用它，我需要使用ref（或者至少我认为这就是原因）

我按照React doc的说明在函数组件中使用ref，我有一个方法

handleClick

，当您单击我想调用的

audio.play（）。然而，当我点击其中一个鼓垫时，应用程序崩溃并出现错误“audio.play不是一个函数”。这是ref的问题吗？如有任何建议，我们将不胜感激

子组件DrumPad.js：

const DrumPad = ({ id, letter, src }) => {

  let audio = React.createRef(); // <--

  const handleClick = () => { // <--
    audio.play();
  }

  return (
    <div
      className="drum-pad"
      id={id}
      onClick={handleClick}
    >
      <p>{letter}</p>
      <audio
        ref={audio} // <--
        id={letter}
        src={src}
      >
      </audio>
    </div>
  );
}

constdrumpad=（{id，letter，src}）=>{
让audio=React.createRef（）；//{/(
))}
);
}
DOM节点实际上存储在
current
键下

这将解决您的问题：

const handleClick = () => { 
    audio.current.play();
}



const handleClick = () => { 
    audio.current.play();
}