如何在反應中調用另一個組件的 function

Question

我是新手，我想從 music.js 調用 audioplayer.js 的 play() function。 我聽說過上下文 api，但我不知道如何使用它。 當我單擊按鈕時，它應該從另一個組件調用 play() function

 //music.js... <div class = "music-content-container"> <div class = "music-box"> <div class = "user-musics"> <ul> {musics && musics.map((name, index)=>{ return( <> <li key = {index}><button onClick = {play()} value = {name}>Play</button>{name}</li>//the button should go to the play function of audioplayer.js </> ) })} </ul> </div> </div> </div> </div> <AudioPlayer title = {audioTitle}/>...

這就是 audioplayer.js 的樣子....

 function AudioPlayer(props){ //ignore this part const audioRef = useRef(); const audioPlayer = audioRef.current const [audioSrc, setAudioSrc] = useState() useEffect(()=>{ if(props.title){ firebase.database().ref("public/songs/"+props.title).on("value", (snapshot)=>{ setAudioSrc(snapshot.val().aduioURL) }) } }, [props.play]) const [progVal, setProgVal] = useState("0%") function update(event){ let duration = (event.target.currentTime/event.target.duration)*100 setProgVal(duration) } // i want it to call this function when it plays function play(e){ audioPlayer.play() } function stop(){ audioPlayer.pause(); } return( <div className = "audio-wrapper"> <div className = "audio-container"> <div className = "audio-box"> <audio id = "player" ref = {audioRef} src = {audioSrc} name = "audioplayer" onTimeUpdate = {update}> </audio> <button onClick = {play}>Play</button> <button onClick = {stop}>stop</button> <div class = "progress_div"> <div class = "progress_holder" id= "prog_holder"> <div id = "progress_meter" style = {{width: progVal + "%"}}></div> </div> </div> </div> </div> </div> ) } export default AudioPlayer

任何答案都會對我有很大幫助，並告訴我是否有任何方法可以做到這一點。

Answer 1

一般來說，React 喜歡“自上而下”的工作，即通過將道具從父母傳遞給孩子。 以一種依賴父級能夠在子級中調用function 的方式來構建組件是一種不好的做法。 您也不需要context ，因為它不是深度嵌套的組件樹。

一種可能的解決方案是讓 AudioPlayer 在收到title屬性的有效值時自動播放歌曲。 在music組件中使用一些 state 來維護當前加載的歌曲。 單擊歌曲列表中的播放按鈕時，設置此 state 屬性。

Answer 2

一種快速的解決方法是在這樣的音樂 js 中創建 state

const [audioPlayer,setAudioPlayer] = useState(null);

現在將此 setAudioPlayer 作為道具傳遞給 AudioPlayer

 <AudioPlayer setAudioPlayer={setAudioPlayer} title = {audioTitle}/>

現在在 useEffect 調用中

setAudioPlayer(audioRef.current)

所以現在在 music.js 的 state audioPlayer 中，您可以訪問 AudioPlayer.js 的方法

這是一個不太確定這是否是正確方法的解決方法。