声音云 SC.stream api 无法正常工作

Question

我们在下面有这个反应组件，我们很想在单击图像时开始从 soundcloud 流式传输歌曲。但是当列出歌曲时，所有歌曲都会同时播放..任何建议表示赞赏..

var DisplayTable = React.createClass({

    playTrack: function(track) {
        console.log('track info: >>>>>>>>>> ',track);
        SC.stream('/tracks/'+track.id, function(stream){
            stream.play();
        });
    },

    render:function(){
        //making the rows to display
        var rows=[];
        var context = this;
        this.props.data.forEach(function(track) {
            // rows.push(<tr><td>{track.title}</td><td>{track.permalink_url}</td></tr>)
            rows.push(<tr><td>{track.title}</td><td><img onClick={ context.playTrack(track) } className="images" src={track.artwork_url}/></td></tr>)

        });
        //returning the table
        return(
             <table>
                <thead>
                    <tr>
                        <th className="table-head">Title</th>
                        <th className="table-head">Album Art</th>
                    </tr>
                </thead>
                <tbody>{rows}</tbody>
            </table>
        );
    }
});

Answer 1

您应该为此创建一个子组件，每一行都有自己的 onClick。目前，您正在为每一行调用相同的函数，并在渲染时同时调用它们。

var TableRows = React.createClass({
    render: function(){
        var track = this.props.track;
        return (
            <tr ref="trackRow">
                <td>{track.title}</td>
                <td><img onClick={ this.playTrack } className="images" src={track.artwork_url}/></td>
            </tr>
        );
    },
    playTrack: function(){
        // use the track in your props aka... this.props.track

    }
});

然后将 foreach 更改为映射并执行此操作

this.props.data.map(function(track, i) {
    rows.push(<TableRows track={track} key={i} />);
});

注意：这是对行渲染的清理...如果您注意到在渲染它时正在调用 playTrack 函数...onClick={context.playTrack(track)}实际上是在当时和那里调用该函数...所以你不想用括号调用它，而是为每一行使用一个组件，这样你就可以访问道具中的轨道。

声音云 SC.stream api 无法正常工作

sound cloud SC.stream api not working in react as wished

soundcloud

reactjs