ReactDOM/getDOMNode() invece di jQuery?

Question

Come dovrei strutturare questo codice ReactJS per utilizzare ReactDOM/getDOMNode() anziché jQuery. Questo riproduce un suono quando viene premuto un pulsante.

Non sono sicuro se devo mettere la .play() in myAudioObject e accedervi tramite Refs, o il contrario ... pass Refs con .getDomNode() in myPlayButton.

Inoltre, sta usando jQuery nel modo in cui lo ho sotto considerato una cattiva pratica con ReactJS?

var myAudioObject = React.createClass({ 
    render: function() { 
     return (
     <audio id="mySoundClip" preload="auto"> 
      <source src='audio/thing.mp3'></source> 
      Your browser does not support audio. 
     </audio> 
    ); 
    } 
}); 


var myPlayButton = React.createClass({ 
    handleClickPlay: function() { 
     var audio = $("#mySoundClip")[0]; 
     audio.load(); // This reloads the audio tag in the DOM, so also reloads ReactJS component. 
     audio.play(); 
    }, 

    render: function() { 
     return (
     <button onClick={this.handleClickPlay}>Play</button> 
    ); 
    } 
}); 


var App = React.createClass({ 
    render: function() { 
     return (
     <div> 
      <myAudioObject /> 
      <myPlayButton /> 
     </div> 
    ); 
    } 
}); 


React.renderComponent((
    <App /> 
), document.body); 

Answer 1

Sei sulla strada giusta, provare a utilizzare arbitri come questo (o usare flux) - JSFiddle

var myAudioObject = React.createClass({ 
    play: function() { 
     var audio = this.getDOMNode(); 
     audio.load(); 
     audio.play(); 
    }, 
    render: function() { 
     return (
      <audio preload="auto"> 
       <source src='audio/thing.mp3'></source> 
       Your browser does not support audio. 
      </audio> 
     ); 
    } 
}); 

var myPlayButton = React.createClass({ 
    render: function() { 
     return (
      <button onClick={this.props.handleClickPlay}>Play</button> 
     ); 
    } 
}); 

var App = React.createClass({ 
    handleClickPlay: function() { 
     this.refs.audioObject.play() 
    }, 
    render: function() { 
     return (
      <div> 
       <myAudioObject ref="audioObject" /> 
       <myPlayButton handleClickPlay={this.handleClickPlay} /> 
      </div> 
     ); 
    } 
}); 

utilizzando jQuery così è visto di buon occhio, perché diventa subito chiaro che cosa è seconda che cosa.