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

Question

我试图在反应组件渲染后运行一个函数。

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

在这个函数中，我需要使用document.getElementById("myId")

获得一个真正的DOM元素

所以我尝试在componentDidUpdate中运行我的功能，但显然我已经在浏览器之前运行了＃34;画了＃34;我的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();
}