reactjs - ReactDOM / getDOMNode() 而不是 jQuery？

Question

我应该如何构造这个 ReactJS 代码以使用 ReactDOM /getDOMNode()而不是 jQuery。按下按钮时会播放声音。

不确定我是否应该放入.play()并myAudioObject通过 Refs 访问它，或者以其他方式...将 Refs 与.getDomNode()into一起传递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);

Answer 1

你在正确的轨道上，尝试使用这样的参考（或使用通量） - 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 是不受欢迎的，因为它很快就会变得不清楚是什么取决于什么。