Reagieren - wie bekomme ich ein echtes DOM-Element, nachdem die Komponente aktualisiert wurde

Question

Ich versuche eine Funktion nach dem Rendern der Komponenten auszuführen.

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

In dieser Funktion Ich brauche ein echtes DOM-Element erhalten mit document.getElementById("myId")

Also versuchte ich meine Funktion in componentDidUpdate aber offenbar vor dem Browser i'ts laufen zu laufen „gemalt“ mein div so ich m bekommen null.

Gibt es eine elegante Lösung für dieses Problem?

Answer 1

Sie haben Recht mit der Annahme, dass die DOM-Elemente nicht notwendigerweise gezeichnet werden, wenn die componentDidUpdate-Methode aufgerufen wird.

Sie können dies mit window.requestAnimationFrame umgehen.

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(); 
}