ReactDOM / getDOMNode() 代替 jQuery？

Question

我该如何编写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);

- Giant Elk

Answer 1

您走在正确的道路上了，试着像这样使用refs（或使用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的技术被认为不好，因为很快就会变得不清晰，不知道哪个东西依赖于哪个。

- Chad Cache