Question

我的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

Answer 1

尝试

componentDidMount () {
  window.requestAnimationFrame(() => {
    this.setState({ 
      left: Math.round(this.container.getBoundingClientRect().width),                       
      x: Math.round(this.container.getBoundingClientRect().x)                               
    });
  }                                                                                       
}

实际上DOM可用且调用componentDidMount有一些挑剔;使用requestAnimationFrame将确保在绘制完成后调用它。

Answer 2

您需要使用ref回调而不是内联ref。当您使用内联ref时，第一个渲染传递ref将为null。传递回调时，只有在元素加载后才会触发。

applyRef(ref) {
    this.container = ref;
}
...
<div
    className={styles.container}
    style={containerStyle}
    ref={this.applyRef}
>

React获取组件大小

2 个答案: