Définir l'état de href ou de passer en tant que props à nouveau composant dans React

Question

Un peu nouveau à Réagir, donc désolé si je ne l'explique pas trop bien. Je fais un projet de réaction qui permet aux utilisateurs de rechercher des pistes d'artistes de l'API Spotify. Le résultat de la recherche rend un tas de cartes avec des informations d'artiste, et avec un clic sur une étiquette (href est une URL à un aperçu de la chanson) Je voudrais rendre un composant visualiseur audio qui fonctionne avec le nœud et les tags audio.

Quoi qu'il en soit, j'ai deux principaux problèmes:

1) Je dois passer l'url aperçu de la chanson href cliqué sur le composant de l'analyseur audio comme source audio (quelque chose comme audio.src = preview_url). J'ai besoin de comprendre comment a) soit définir l'état avec le href cliqué en cours et/ou b) passer l'URL de prévisualisation comme accessoires au composant visualiseur audio.

2) J'ai besoin que le composant ArtistCard disparaisse en cliquant sur l'étiquette de sorte que seul le composant visualiseur audio soit rendu (ce qui sera, espérons-le, plus facile que la question 1).

Voici mon code, et désolé encore si cela n'a pas beaucoup de sens. Je peux essayer de clarifier si besoin est.

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> 
     ) 
    } 
} 
} 

et voici la composante Visualiseur audio (évidemment manque pas mal de choses ici encore, mais je veux faire le href passé au-dessus bien avant toute autre chose):

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 est asynchrone par défaut, donc après avoir défini l'état, vous ne pouvez pas supposer l'état sera réglé et faire le contrôle if(this.state.renderAudioAnalyzer)

Votre logique dans la fonction de rendre supprimera la carte de l'artiste whenev cliquez sur l'ahref. (ne pas oublier de faire e.preventDefault, sans quoi il va à nouveau rendre l'application, ce qui est le problème principal je pense).

Et passez l'URL de la chanson à AudioAnalyzer comme un accessoire qui est assez simple.