反应得到元件尺寸
反应得到元件尺寸
提问于 2017-10-05 09:54:18
我的getBoundingClientRect总是返回一个包含0值的对象。我想是和异步有关吧？下面是获取组件宽度和x的函数的定义。
componentDidMount () {
this.setState({
left: Math.round(this.container.getBoundingClientRect().width),
x: Math.round(this.container.getBoundingClientRect().x)
});
}以下是呈现函数的开始：
render() {
const containerStyle = {
left : `-${Math.min(this.state.left, this.state.x) - 35}px`,
};
return ( !!this.state.visible &&
<div
className={styles.container}
style={containerStyle}
ref={(element) => { this.container = element; }}
>以下是来自getBoundingClientRect的响应
DOMRect {x: 0, y: 0, width: 0, height: 0, top: 0, …}
bottom : 0
height : 0
left : 0
right : 0
top : 0
width : 0
x : 0
y : 0回答 2
Stack Overflow用户
回答已采纳
发布于 2017-10-05 10:54:46
试一试
componentDidMount () {
window.requestAnimationFrame(() => {
this.setState({
left: Math.round(this.container.getBoundingClientRect().width),
x: Math.round(this.container.getBoundingClientRect().x)
});
}
}DOM实际上是可用的，componentDidMount正在调用，这有一些微妙之处；使用requestAnimationFrame将确保它在油漆发生后被调用。
Stack Overflow用户
发布于 2017-10-05 10:31:35
您需要使用ref回调，而不是内联ref。当您使用内联ref时，第一个呈现传递该ref将为空。当传入回调时，它只在元素加载后触发。
applyRef(ref) {
this.container = ref;
}
...
<div
className={styles.container}
style={containerStyle}
ref={this.applyRef}
>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/46591978
复制
相似问题
得到反应元件的大小？
如何改变反应元件的尺寸？
样式.反应元件尺寸和性能.本机
如何得到承诺值反应元件？
动态JointJS元件尺寸
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
