React-组件更新后如何获取真实的DOM元素

Question

我正在尝试在组件渲染后运行一个函数。

render: function(){
   return(
      <div id="myId"></div>
   )
}

在此函数中，我需要使用document.getElementById("myId")获得一个真正的DOM元素。

所以我试图在componentDidUpdate运行我的函数，但是显然我没有在浏览器“绘制”我的div之前运行，所以我得到了null 。

有解决这个问题的优雅方法吗？

Answer 1

您的假设是正确的，即在调用componentDidUpdate方法时不一定绘制DOM元素。

您可以使用window.requestAnimationFrame绕过它。

onNextFrame() {
  var _this = this;
  window.requestAnimationFrame(function() {
    var domnode = _this.getDOMNode();
    if (domnode !== undefined) {
      // set your attributes here
      jwplayer(domnode).setup({
        "file": "http://example.com/myVideo.mp4",
        "image": "http://example.com/myImage.png",
        "height": 360,
        "width": 640
      });
    }
  });
},
componentDidMount() {
  this.onNextFrame();
},
componentDidUpdate() {
  this.onNextFrame();
}