React - 組件更新後如何獲得真正的DOM元素

我試圖在反應組件呈現後運行一個函數。React - 組件更新後如何獲得真正的DOM元素

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

在這個函數中我需要一個真正的DOM元素與document.getElementById("myId")

於是，我就在componentDidUpdate運行我的功能，但顯然i'ts「畫」在瀏覽器中運行前我的div所以我得到null。

這個問題有沒有優雅的解決方案？

來源

2016-07-12 0xori

我想你應該通過引用而不是id來解決它。例如看看[這裏]（https://facebook.github.io/react/docs/more-about-refs.html） – KRONWALLED

，但我真的需要使用id。我正在簡化這個問題，我使用jwplayer.setup（https://developer.jwplayer.com/jw-player/docs/developer-guide/api/javascript_api_reference/#setup），它使用document.getElementById – 0xori

假設在調用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(); 
}

來源

2016-07-12 11:57:32 KRONWALLED

工作就像魅力！ – 0xori

React - 組件更新後如何獲得真正的DOM元素

回答

相關問題