Réagir - comment obtenir l'élément DOM réel après la mise à jour du composant

Question

J'essaie d'exécuter une fonction après avoir rendu le rendu du composant.

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

Dans cette fonction, je dois obtenir un véritable élément DOM avec document.getElementById("myId")

J'ai essayé de courir ma fonction dans componentDidUpdate mais apparemment i'ts en cours d'exécution avant que le navigateur « peint » mon div donc je m obtenir null.

Existe-t-il une solution élégante à ce problème?

Answer 1

Vous avez raison avec l'hypothèse que les éléments DOM ne sont pas nécessairement dessinés lorsque la méthode componentDidUpdate est appelée.

Vous pouvez ignorer cela avec 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(); 
}