如何在React应用程序(Spotify SDK)中从API转换/使用脚本标签?

时间:2019-05-11 06:37:09

标签: javascript reactjs

我想在我的React应用程序中使用Spotify SDK,但我不知道如何转换脚本标签,以便可以将其与onClick事件监听器等配合使用

我可以得到Spotify在文档中提供的示例,但这只是在html文件上。我已经尝试过像其他模块一样导入它,但是我猜它不能那样工作。

示例可以在这里看到: https://developer.spotify.com/documentation/web-playback-sdk/quick-start/


//
import React from 'react';
import axios from 'axios';
import Spotify from "https://sdk.scdn.co/spotify-player.js"

export default class SpotifyPlayer extends React.Component{
  state = {
  }

  handleSDK = () => {
    window.onSpotifyWebPlaybackSDKReady = () => {
      const token = '[My Spotify Web API access token]';
      const player = new Spotify.Player({
        name: 'Web Playback SDK Quick Start Player',
        getOAuthToken: cb => { cb(token); }
      });

      // Error handling
      player.addListener('initialization_error', ({ message }) => { console.error(message); });
      player.addListener('authentication_error', ({ message }) => { console.error(message); });
      player.addListener('account_error', ({ message }) => { console.error(message); });
      player.addListener('playback_error', ({ message }) => { console.error(message); });

      // Playback status updates
      player.addListener('player_state_changed', state => { console.log(state); });

      // Ready
      player.addListener('ready', ({ device_id }) => {
        console.log('Ready with Device ID', device_id)
        this.setState({device_id});
      });

      // Not Ready
      player.addListener('not_ready', ({ device_id }) => {
        console.log('Device ID has gone offline', device_id);
      });

      // Connect to the player!
      player.connect();
    };
  }

  onPlay = () => {
    let config = {
      someSecret: 'sauce',
      someKey: 'value',
      device_id: this.state.device_id
    };

    axios.put('https://api.spotify.com/v1/me/player/play', config)
    .then(/* do something */)
    .catch(/** handle error */)

  };

  render() {
    this.handleSDK();
    return <div>
      {/* player goes here */}
      <button onClick={}>Play</button>
    </div>
  };
};

我想知道如何将脚本导入到我的React组件中。

0 个答案:

没有答案