React - 使用按钮重定向链接

Question

我是 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>

Answer 1

我认为您正在寻找这样的东西：

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" 添加到您的锚标记中，使其在新标签中打开。