如何在音频播放器中传递React道具?

我创造了一个 组成部分 作为一个音频播放器,我正在努力 src 可在不同文件中编辑 <audio controls src={sourceFile}/> . 我试着使用react道具,但不起作用。我该怎么解决这个问题?

我用的是Next。js

组件文件:

    const AudioPlayer = (sourceFile) => {
      return (
     <div>
        <audio preload="metadata" controls src={sourceFile} />
      </div>
      );
    };
    
    export default AudioPlayer;

指数js

<AudioPlayer sourceFile="audio.mp3" />