コンポーネントのサイズを取得する

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

はあなたではなく、インラインrefのREFコールバックを使用する必要が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

DOMは、実際に利用可能とcomponentDidMountが呼び出されると、いくつかのfinickinessあります

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

てみてください。 requestAnimationFrameを使用すると、ペイントが発生した後に確実に呼び出されます。

Answer 2

からの応答です。インライン参照を使用すると、最初のレンダーパスはrefがnullになります。コールバックを渡すと、要素がロードされた後にのみ起動されます。

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