在reactjs应用程序中，如何获得正确的dom元素宽度？

Question

当我用reactjs编写一个web应用程序时，我想在目标div容器中创建视频播放器。

所以，我编写了＆＃39; componentDidMount＆＃39;功能，像这样：

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

}

但是，实际上，我让播放器比实际的盒子宽。如下：

所以，我测试了代码＆＃39; document.body.clientWidth＆＃39;当页面刷新时，在Chrome控制台中。起初，结果是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

}