レンダリングする前に親ノードにvirtualDOMからアクセスする| ReactJS

Question

親要素に応じてコンポーネントの寸法を設定する必要があります。レンダリングする前に、virtualDOMからのrefによって親の幅と高さを取得することは可能ですか？

親

export default class App extends React.Component { 
 
    render() { 
 

 
    return (
 
     <div> 
 
     <div className={'avocado-container'} ref={(container) => { this.container = container; }}> 
 
      <Resizer parent={this} scrollAxis={'y'}> 
 
      </Resizer> 
 
     </div> 
 
     </div> 
 
    ); 
 
    } 
 
}

私は子供のコンストラクタで寸法を取得する必要があります。

this.refs.container.offsetWidthのようなもので可能ですか？

Answer 1

レイアウトの寸法は、仮想DOMではなくブラウザによって計算されます。寸法を手で設定するか、CSSを使用して子コンポーネントの幅と高さを設定します。 componentDidMountのレンダリングされたコンポーネントから幅と高さを読み取ってそこにsetStateを呼び出すこともできます。これは理想的ではないため、2度目のレンダーが発生することがあります。