Question

React有点新鲜，很抱歉，如果我不解释这个太好了。我正在制作一个反应项目，允许用户从Spotify API搜索艺术家曲目。搜索结果呈现一堆带有艺术家信息的卡片，并且点击标签（href是歌曲预览的URL）我想呈现一个与音频分析器节点和音频标签一起使用的音频可视化器组件。

无论如何，我有两个主要问题：

1）我需要将点击的href歌曲预览网址作为音频源传递给音频分析器组件（类似audio.src = preview_url）。我需要弄清楚如何a）用当前点击的href设置状态和/或b）将预览url作为道具传递到音频可视化器组件。

2）我需要ArtistCard组件在单击标签时消失，以便仅渲染音频可视化器组件（这有望比问题1更容易）。

这是我的代码，如果这没有多大意义，请再次抱歉。我可以尝试澄清是否需要。

export default class ArtistCard extends Component {
constructor(props){
    super(props)

    this.state = {
        renderAudioAnalyzer: false,
        visibility: ''
    }
}

togglePreviewUrlState(){
    this.setState({ renderAudioAnalyzer: true })
    if(this.state.renderAudioAnalyzer){
        this.refs.artistCard.style.display = 'hidden'
        //this currently doesn't work yet...
        // style={{display: 'none'}} <--- do something like this?
    }
}



render() {
    let {tracks} = this.props
    if(!this.state.renderAudioAnalyzer){
        return (
            <div className="card col s3" id="artistCard">
                <div className="card-inner">
                    <div className="card-image">
                        <img alt="/logo.svg" className="Image" src={tracks.album.images[1].url}/>
                        <span className="card-title"></span>
                    </div>
                    <div className="card-content">
                        <p id="artistCardTrackName">{tracks.album.name}</p>
                    </div>
                    <div className="card-action">
                        <a
                            onClick={this.togglePreviewUrlState.bind(this)}
                            href={tracks.preview_url} //need to set this as state or pass as props?
                        >{tracks.name}</a>
                    </div>
                </div>
            </div>
        )
    }else{
        return(
            <div><AudioAnalyzer/></div>
        )
    }
}
}

这里是音频可视化组件（显然这里仍然缺少一些东西，但我想让href在其他任何事情之前正确传递）：

export default class AudioAnalyzer extends Component {
  constructor(props){
    super(props)
  }

  render(){
    return (
      <div id="mp3_player">
        <div id="audio_box">
          <audio
            refs="audio"
            autoPlay="true"
            controls="true"
            src={this.props.tracks.preview_url} <--href needs to be passed to here some how?
          >
          </audio>
        </div>
        <canvas
          refs="analyser"
          id="analyser"></canvas>
      </div>
    )
  }
}

Answer 1

    this.setState({ renderAudioAnalyzer: true })
if(this.state.renderAudioAnalyzer){
    this.refs.artistCard.style.display = 'hidden'
    //this currently doesn't work yet...
    // style={{display: 'none'}} <--- do something like this?
}

默认情况下，setState是异步的，因此在设置状态后，您将无法设置状态并执行检查if(this.state.renderAudioAnalyzer)

您在渲染功能中的逻辑将在您点击ahref时删除艺术家卡片。（别忘了做e.preventDefault，如果没有它会再次渲染应用程序，这是我认为的主要问题）。

将歌曲网址传递给AudioAnalyzer，作为一个非常简单的道具。

设置href的状态或将其作为道具传递给React中的新组件

1 个答案: