我应该如何构建此 ReactJS 代码以使用 ReactDOM/getDOMNode() 而不是 jQuery。按下按钮时会发出声音。

不确定是否应该将 .play() 放入 myAudioObject 中并通过 Refs 访问它，或者以其他方式...通过 传递 Refs。 getDomNode() 到 myPlayButton。

另外，我在下面使用 jQuery 的方式是否被认为是 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); 

请您参考如下方法:

你走在正确的轨道上，尝试使用这样的引用(或使用 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> 
        ); 
    }  
});  

像这样使用 jQuery 是不受欢迎的，因为它很快就会变得不清楚什么取决于什么。