javascript - audio.play 不是使用 ref 的箭头函数组件的函数错误

Question

我正在从事 freeCodeCamp 鼓机项目。当用户点击鼓垫时，我想要播放声音。由于 audio 元素不是真正的 DOM 元素而是它的一个副本，要引用它我需要使用 ref(或者至少我认为这就是原因)。

我按照 React 文档说明在函数组件中使用 ref，并且我有一个方法 handleClick 当您单击我想调用的“鼓垫”时触发该方法 audio.play()。但是，当我单击其中一个鼓垫时，应用程序崩溃并显示错误“audio.play 不是一个函数”。裁判有问题吗？任何建议表示赞赏。

子组件 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>
  );
}

父 App.js:

const sounds = [
  { id: 'snare', letter: 'Q', src: 'https://www.myinstants.com/media/sounds/snare.mp3' },
  // etc.
];

const App = () => {

  return (
    <div className="drum-machine">
      <div className="drum-pads">
        {sounds.map(sound => (
          <DrumPad
            id={sound.id}
            letter={sound.letter}
            src={sound.src}
          />
        ))}
      </div>
    </div>
  );
}

Answer 1

DOM 节点实际上存储在 current 键下。

这应该可以解决您的问题:

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

React docs about createRef