Question

我有一个从API收到的曲目数组[]。我将它传递给地图函数，该函数将为轨道中的每个轨道返回一个轨道。我想导出一个特定于该轨道的变量（Song），以便在我的事件处理程序中处理。唯一不起作用的是歌曲的范围。我无法在地图功能中设置歌曲的状态，或者组件进入无限的重新渲染循环。

handleEnter(){
   //I want to get the song into this context and play it here
    this.props.mouseEnter();
}

handleLeave(){
    //same for pausing
    this.props.mouseLeave();
}

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={this.handleLeave.bind(this)}
            />
            <p className="showMe"><span>{track.name}</span></p>
        </div>
    );
}

getTracks(){
    if(this.props.tracks) {
        console.log(this.props.tracks);
        return (
            <div>{this.props.tracks.map(track => this.createTrack(track))}</div>
        );
    }
}

componentWillMount(){
    this.props.fetchMessage();
}

render(){
    return(
        <div>{this.getTracks()}</div>
    )
}

Answer 1

如果您想使用.bind，可以将其发送到handleEnter和handleLeave。

handleEnter( trackID ) {
    // trackID available here
}

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, track.id )}
                onMouseLeave={this.handleLeave.bind( this, track.id )}
            />
            <p className="showMe"><span>{track.name}</span></p>
        </div>
    );
}

它通常best practice不使用.bind作为反应，因为它在每个渲染上创建一个新函数。相反，您应该创建一个<Track />组件，将其传递给轨道，然后将handleEnter和handleLeave作为道具传递。

const track = ( props ) => {

    let { track, handleEnter, handleLeave } = props;

    const onMouseEnter = () {
        handleEnter( track.id );
    }

    const onMouseLeave = () {
        handleLeave( track.id );
    }

    return (
        <div className="image" key={track.id}>
            <img
                className="img-circle"
                src={track.album.images[0].url}
                onMouseEnter={ onMouseEnter }
                onMouseLeave={ onMouseLeave }
            />
            <p className="showMe">
                <span>{track.name}</span>
            </p>
        </div>
    );

};

然后在你的渲染中，你就像你一样映射并输出<Track /> pure components而不是全部组件

Answer 2

看看这个。希望它能解决你的问题。

NullPointerException

我认为这是另一个React / JS上下文问题，我该如何提取这个变量？

2 个答案: