javascript - 当状态改变时更新 React 组件，使用对自身的引用

Question

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

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

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

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

我无法在组件呈现之前执行此操作。那么应该如何以及在哪里完成呢？

示例详细信息:

这是一个非常简单的 React 组件。它有一个 <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();
      }
    }
  }
});

Answer 1

使用 componentDidUpdate 似乎是合适的。

1.点击2.改变状态->触发-重新渲染3. 在你的组件被挂载之后调用正确的视频函数

componentDidUpdate: function() {
   if (this.state.play) {
        this.refs.MyVideo.play();
   } else {
        this.refs.MyVideo.pause();
   }
}

如果您需要在第一次渲染时控制这些功能，请使用 componentDidMount。我认为简单干净。

编辑:我使用 ref 编辑了我的代码，我认为这确实是正确的方法 https://facebook.github.io/react/docs/more-about-refs.html

只需在您的视频组件中放置一个 ref:

 <video ref="MyVideo"> </video>

在 mark 的评论后更新