反應獲取組件大小

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)        
    }); 
    }                      
} 

有一些finickiness與DOM中實際可用和componentDidMount被稱爲;使用requestAnimationFrame將確保它在繪畫發生後被調用。

Answer 2

你需要使用一個裁判的回調，而不是一個內聯ref的響應。當你使用內聯引用時，第一次渲染傳遞將是空的。當你傳入一個回調時，它只會在元素加載後觸發。

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