React - 구성 요소가 업데이트 된 후 실제 DOM 요소를 가져 오는 방법

Question

반응 구성 요소 렌더링 후에 함수를 실행하려고합니다. 내가 document.getElementById("myId")

와 실제 DOM 요소를 얻을 필요가이 기능에서

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

그래서 내가 componentDidUpdate 내 기능을 실행하려고하지만 분명히 "그린"브라우저 전에 실행 i'ts 내 사업부 나 '너무 점점 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(); 
}