为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

森林海 2018-10-11 14:19:39
我在写一个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多个像素。不知道是我思路有问题,代码不对,还是本来就是一个常见问题,有什么好的方法让这里对其一点。
查看完整描述

1 回答

?
30秒到达战场

TA贡献1828条经验 获得超6个赞

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


查看完整回答
反对 回复 2018-11-24
  • 1 回答
  • 0 关注
  • 4219 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号