jQuery के बजाय ReactDOM/getDOMNode()?

Question

मैं jQuery के बजाय ReactDOM/getDOMNode() का उपयोग करने के लिए इस ReactJS कोड को कैसे ढूढ़ूं। जब बटन दबाया जाता है तो यह ध्वनि बजाता है।

सुनिश्चित नहीं हैं कि अगर मैं .play()myAudioObject में Refs .getDomNode() साथ myPlayButton में डाल दिया और Refs, या अन्य तरीके से द्वारा ही पहुंच जाना चाहिए था ... गुजरती हैं।

इसके अलावा, jQuery का उपयोग कर रहा है, जिस तरह से मैंने इसे ReactJS के साथ खराब अभ्यास माना है? 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> 
     ); 
    } 
}); 

jQuery का उपयोग कर ऐसा पर सिकोड़ी है, क्योंकि यह जल्दी पर निर्भर करता है क्या यह स्पष्ट नहीं हो जाता है -

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

आप सही रास्ते पर कर रहे हैं, इस तरह refs का उपयोग करके देखें (या flux) क्या।