Wie kann ich in der reactjs App die richtige Breite eines dom Elements erhalten?

Question

Als ich eine Web-App mit reactjs schrieb, wollte ich einen Video-Player innerhalb eines Ziel-Div-Containers erstellen.

So codiert ich in der Funktion 'componentDidMount', wie folgt aus:

componentDidMount(){ 

    const box = document.getElementById('video-box'); 

    //use the ThirdPartyObject player API to create the player 

    player = ThirdPartyObject('#video-box').videoPlayer({ 
     'width':box.clientWidth, 
     'height':box.clientWidth * 9/16, 
     'vid' : vid, 
     'df': '1' 
    }); 

} 

Aber eigentlich habe ich die Spieler weiter als die tatsächliche Box bekam. Wie folgt:

So testete ich den Code 'document.body.clientWidth' in der Konsole von Chrom, wenn die Seite erfrischend war. Zuerst war das Ergebnis 1440, aber die Zahl änderte sich schließlich zu 1423.

Also, warum ist das? Wie kann ich das Richtige tun?

Answer 1

, wenn ich einige Experiment tun, wie folgt:

componentDidMount(){ 

    const box = document.getElementById('video-box'); 

    //use the ThirdPartyObject player API to create the player 

    console.log('before player init:　' + box.clientWidth) 
    player = ThirdPartyObject('#video-box').videoPlayer({ 
     'width':box.clientWidth, 
     'height':box.clientWidth * 9/16, 
     'vid' : vid, 
     'df': '1' 
    }); 
    console.log('after player init:　' + box.clientWidth) 

} 

ich gern, dass kurz nach dem Spieler init ist die Ausgangsbreite die richtige. Ich ändere den Stil des Players, damit es funktioniert. Obwohl ich weiß, dass es nicht der perfekte Weg ist.

componentDidMount(){ 

    const box = document.getElementById('video-box'); 

    //use the ThirdPartyObject player API to create the player 

    console.log('before player init:　' + box.clientWidth) 
    player = ThirdPartyObject('#video-box').videoPlayer({ 
     'width':box.clientWidth, 
     'height':box.clientWidth * 9/16, 
     'vid' : vid, 
     'df': '1' 
    }); 
    player.style.width = box.clientWidth 
    player.style.height = box.clientWidth *9 /16 

}