Блог

Я новичок в React , поэтому извините, если это слишком просто.

Я пытаюсь добавить кнопку в свое приложение, чтобы перенаправить ее на Spotify.

Вот как я пытаюсь это сделать, пока.

 class Spotify extends Component {
  constructor () {
    super()
    this.handleClick = this.handleClick.bind(this)
  }

  handleClick () {
    console.log('Success!')
  }

  render () {
    return (
      <div className='button__container'>
        <button className='button' onClick={this.handleClick}>
          Link your Spotify account
        </button>
      </div>
    )
  }
}

export default Spotify;
  

Итак, каков наилучший способ связать вышеупомянутую кнопку с:

  <a href="http://localhost:8888"></a>
  

Я думаю, вы ищете что-то вроде этого:

 class Spotify extends Component {    
  render () {
    return (
      <div className='button__container'>
        <a className='button' role="button" href="http://someurl.com">
          Link your Spotify account
        </a>
      </div>
    )
  }
}

export default Spotify;
  

Если вашему компоненту не требуется состояние, рассмотрите возможность рефакторинга приведенного выше кода в компонент без состояния следующим образом:

 export const Spotify = () => (
      <div className='button__container'>
        <a className='button' role="button" href="http://someurl.com">
          Link your Spotify account
        </a>
      </div>
);
  

Если вы просто пытаетесь отобразить ссылку, тег привязки будет работать просто отлично. Вы можете добавить target="_blank" к своему тегу привязки, чтобы он открывался на новой вкладке.