react中如何获取dom元素的正确宽度？

Question

我在写一个react应用的时候，需要在渲染完成之后，添加一个视频播放器到页面上，用于播放视频。
对于播放器进行设置的思路是：根据需要获取包含播放器的div的元素的宽度，用以设置播放器的宽度。

有一段这样的代码：

componentDidMount(){

        const box = document.getElementById('video-box');
        
        //调用第三方的播放器对象，创建播放器
        player = ThirdPartyObject('#video-box').videoPlayer({
            'width':box.clientWidth,
            'height':box.clientWidth * 9 / 16,
            'vid' : vid,
            'df': '1'
        });

    }

不过，最终实现的效果是，此时获得的宽度比页面最终的div会宽十多个像素。

经过测试，我怀疑是js代码加载过程中，dom元素的宽度发生了变化。我尝试在页面刷新后，再控制台不停的console.log(document.body.clientWidth),这个宽度，最开始也是会比较大，最后会减小10多个像素。

不知道是我思路有问题，代码不对，还是本来就是一个常见问题，有什么好的方法让这里对其一点。

Answer 1

觉得你应该从 videoPlayer 这个库入手，看有没有能用上的回调函数。比如： 布局完成或者初始化完成后的回调。。。

Answer 2

可以参考这个：https://segmentfault.com/q/10...
你计算出来的宽度可能包含了滚动条。