상태를 href로 설정하거나 소품으로 소품을 새 구성 요소로 전달합니다.

Question

React에 조금 새롭게 추가되었으므로 설명을 잘하지 않으면 죄송합니다. Spotify API에서 아티스트 트랙을 검색 할 수있는 반응 프로젝트를 만들고 있습니다. 검색 결과는 아티스트 정보가있는 카드 묶음을 렌더링하고 태그 (href는 노래 미리보기의 URL)를 클릭하면 오디오 분석기 노드 및 오디오 태그와 함께 작동하는 오디오 시각화 구성 요소를 렌더링하고 싶습니다. audio.src = 미리보기 URL처럼 나는 오디오 소스로 오디오 분석기 구성 요소에 클릭 HREF 노래 미리보기 URL을 전달해야

1) (뭔가) :

어쨌든, 나는 두 가지 문제가있다. 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를 클릭하십시오. (dont는 e.preventDefault를 수행하는 것을 잊어 버리고, 앱을 다시 렌더링 할 것이고, 이것이 내가 생각하는 주된 문제이다).

그리고 노래 URL을 AudioAnalyzer에 전달하면 매우 간단합니다.