Блог

Я новичок в React JS, у меня есть этот код, который создает app div с некоторыми MusicPlayer элементами тегов:

 class App extends React.Component {
    render() {
        return (
            <div id="app">
                <MusicPlayer
                    id="2"
                    visualizerType="RIPPLES"
                    theme={darkTheme}
                    trackInfo={{
                        title: "Imitosis",
                            artist: "Andrew Bird",
                                album: "Armchair Apocrypha"
                    }}
                    trackUrl="https://s3-us-west-2.amazonaws.com/teddarcuri.monarch/Andrew Bird - Imitosis.mp3"
                    albumArt="https://s3-us-west-2.amazonaws.com/teddarcuri.monarch/andrew bird.jpg"
                    utilities={true}>
                </MusicPlayer>
            </div>
        )
    }
}

ReactDOM.render(
    <App />,
    document.getElementById("app")
);
 

Обновить

На основе этого пера

Допустим, я хочу заменить <MusicPlayer> на this:

 <MusicPlayer
    id="3"
    visualizerType="RIPPLES"
    theme={lightTheme}
    trackInfo={{
        title: "Guns amp; Dogs",
            artist: "Portugal, The Man",
                album: "The Satanic Satanist"
    }}
    trackUrl="https://s3-us-west-2.amazonaws.com/teddarcuri.monarch/Portugal. The Man - Guns & Dogs - The Satanic Satanist.mp3"
    albumArt="http://ecx.images-amazon.com/images/I/61X7CiBpZ6L.jpg"
    utilities={true}>
</MusicPlayer>
 

Как это можно сделать с помощью Ajax?

Используйте React state и setState для повторного отображения компонента с новыми данными. Вызовите setState внутри успешного обратного вызова ajax и передайте новые данные setState . Это приведет к отображению MusicPlayer с новыми данными.

Надеюсь, это поможет!

Псевдокод

 class App extends React.Component {
  constructor(props){
    super(props)
    this.state = { //initial empty details
      details : {}
    }
  }
  componentDidMount(){
    //place the ajax call where ever you need
    $.ajax() //call ajax
    .done((data) => {
      this.setState({ //this setState will re render the UI with the new state
        details: { //change the key value pairs as needed
          id: data.id,
          trackInfo: {
            title: data.title,
            artist: data.artist,
            album: data.album,
          },
          trackUrl: data.trackUrl,
          albumArt: data.albumArt,
        }
      })
    })
  }
    render() {
      if(!this.state.details.id) return false //renders nothing when no details available
        return (
            <div id="app">
                <MusicPlayer
                    id={this.state.details.id}
                    visualizerType="RIPPLES"
                    theme={darkTheme}
                    trackInfo={this.state.details.trackInfo}
                    trackUrl={this.state.details.trackUrl}
                    albumArt={this.state.details.albumArt}
                    utilities={true}>
                </MusicPlayer>
            </div>
        )
    }
}
 

Ps. Частотные полосы выглядят лучше, чем частотные колебания: P