Question

在React组件中，我定义组件如何处理回调到setState()的状态更改。这似乎错误/反对流量惯例。在给定新状态的情况下，定义元素应如何表现的正确位置在哪里？

我假设它在render()方法或didMount()方法中。

在这种情况下，我需要在DOM元素上调用JS方法：

if (this.state.play) {
  document.querySelector(".VideoPlayer-Video").play();
} else {
  document.querySelect(".VideoPlayer-Video").pause();
}

在组件渲染之前我不能这样做。那么＆amp;这应该在哪里？

示例明细：

这是一个非常简单的反应组件。它有一个<video>元素，以及一个暂停或播放它的按钮。

状态只有一个属性“play”，如果视频正在播放，则为“true”;如果视频暂停，则为“false”。

单击“播放”按钮时，我翻转状态，然后执行DOM查询以获取视频元素，并在其上调用方法。

这在React中似乎是非常规的，因为我告诉组件如何响应单击处理程序内的状态更改。我希望定义组件如何响应其他地方的状态变化，但我不确定在哪里。

传统地方告诉视频元素是否响应状态变化？我如何在那里引用DOM元素？

代码：

var React = require('react');

module.exports = React.createClass({
  getInitialState: function(){
    return { 
      play: true
    }
  },
  render: function(){
    return <div className="VideoPlayer">
      <video className="VideoPlayer-Video" src="/videos/my-video.mov"></video>
      <button className="VideoPlayer-PlayButton" onClick={this.handlePlayButtonClick}>
        {this.state.play ? "Pause" : "Play"}
      </button>
    </div>
  },
  handlePlayButtonClick: function(){
    this.setState({ 
      play: !this.state.play 
    }), function(){
      var video = document.querySelector(".VideoPlayer-Video");

      if (this.state.play) {
        video.play();
      } else {
        video.pause();
      }
    }
  }
});

状态更改时使用对自身的引用更新React组件

0 个答案: