0
Reactに少し新しくなっていますので、あまり説明しないとすみませます。私はユーザーがSpotify APIからアーティストトラックを検索することを可能にする反応プロジェクトを作成しています。検索結果はアーティスト情報を含むカードの束をレンダリングし、タグをクリックすると（hrefは曲プレビューのURLです）、オーディオアナライザのノードとオーディオタグで動作するオーディオビジュアライザコンポーネントをレンダリングします。 audio.src = preview_urlのような私は、オーディオソースとしてオーディオアナライザコンポーネントをクリックしたのhref曲のプレビューURLを渡す必要がhrefの状態を設定するか、新しいコンポーネントに小道具として渡してください。
1）（何か）：
とにかく、私は、主に2つの問題を抱えています。 a）現在のクリックされたhrefで州を設定し、そして/またはb）オーディオビジュアライザーコンポーネントにpropsとしてプレビュー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>
)
}
}