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

Question

我为音频播放器创建了一个组件，我正在尝试让 src 可以在不同的文件中编辑 <audio controls src={sourceFile}/> . 我尝试使用 React 道具，但它不起作用我该如何解决这个问题？

我正在使用Next.js

组件文件：

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

index.js

<AudioPlayer sourceFile="audio.mp3" />

Answer 1

您需要更改您的 const 函数参数，以便它知道它正在寻找 props

const AudioPlayer = ({sourceFile}) => {...

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

How can I pass React props in audio player?

reactjs

audio

next.js

jsx

react-props