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

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

}

但是，事实上，我让球员比实际的盒子更宽。详情如下:

因此，当页面刷新时，我在chrome控制台中测试了代码“document.body.clientWidth”。起初，结果是1440，但最后数字变为1423

---

那为什么呢？如何做正确的事情？

当我做一些实验时，如下所示：

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

}

---

当我做一些实验时，如下所示：

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

}