reactjsアプリでは、どのようにDOM要素の適切な幅を取得できますか？

Question

reactjsを使用してWebアプリケーションを作成したとき、ターゲットdivコンテナ内にビデオプレーヤーを作成したかったのです。

だから、私はこのように、「componentDidMount」関数でコーディング：

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

} 

しかし、実際には、私が実際にボックスより広いプレーヤーを得ました。次のように：ページが爽やかだったとき

だから、私はクロームのコンソールにコード「document.body.clientWidth」をテストしました。最初は結果は1440でしたが、最後に番号は1423に変更されました。

だからこそ、なぜですか？どうすれば正しいことができますか？

Answer 1

私は以下のようにいくつかの実験、実行します。ちょうどプレーヤーの初期化した後、出力幅が正しいものであることを、私は好き

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) 

} 

を。 私はそれを動作させるためにプレーヤーのスタイルを変更します。私はそれが完璧な方法ではないことを知っていますが。

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 

}