我認爲答案與'this'的背景有關。嘗試通過傳遞handleEnter()函數呈現createTrack時,出現'無法讀取未定義的道具'的錯誤。然而,我可以傳遞一個沒有'this'的常規函數,比如song.play();爲什麼我不能將此函數傳遞給React中的onMouseEnter?
有人可以提供更好的解釋嗎?
handleEnter(){
this.song.play();
// this.props.mouseEnter();
}
createTrack(track){
var song = new Audio([track.preview_url]);
return (
<div className="image" key={track.id}>
<img className="img-circle" src={track.album.images[0].url} onMouseEnter={this.handleEnter.bind(this)} onMouseLeave={()=>song.pause()}/>
<p className="showMe"><span>{track.name}</span></p>
<p className="showMeArtist"><span>{track.artists[0].name}</span></p>
</div>
);
}
getTracks(){
if(this.props.tracks){
console.log(this.props.tracks);
return <div>{this.props.tracks.map(this.createTrack)}</div>
}
}
render(){
return(
<div>{this.getTracks()}</div>
)
}
您可能想詳細說明爲什麼會出現這種問題。 –
讓我知道這是否有意義。 – qballer
這是es6的等價物嗎?如果我使用箭頭功能? {this.props.tracks.map(track => this.createTrack(track))} – driftdrift