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

Question

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

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

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

得到一个真正的 DOM 元素

所以我尝试运行我在 componentDidUpdate 中的功能，但显然我运行在浏览器 "painted" 我的 div 之前 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();
}

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

React - how to get real DOM element after component is updated

javascript

lifecycle

dom

jwplayer

reactjs