React：要素がレンダリングされる前のサイズを知ること

Question

レンダリングする前にコンポーネントがそのサイズを知る必要があると仮定します。私の知る限りでは、私はこれを行うことができます： コンポーネントをレンダリングし、componentDidMount DOMノードを取得してサイズを抽出し、そのサイズで状態を更新してから再度レンダリングします。ウィンドウのサイズ変更イベントは、ウィンドウがサイズ変更されないと仮定します） それは動作しますが、汚れているようです。最初のレンダリングはリソースの無駄です。レンダリングされる前に要素のサイズ（またはそのコンテナ）を知りたいです。要素自体がサイズを宣言する時ですが、親要素がサイズを宣言し、私の​​場合がその状況の1つである状況があります。 これを要約すると、（componentWillMountの）レンダリングされる前に反応コンポーネントの親要素にアクセスする方法はありますか？

P.S.私は反応dimmensionsを知っているが、私は外部のプラグインを必要としない単純なソリューションが欲しい。私は、反応の中でcomponentWillMountの親ノードにアクセスすることが可能かどうかを知りたいだけです。

Answer 1

答えはノーですが、どのように対処するためのアイデアをお読みください。 DOM要素が存在しない場合は

、あなたはその寸法を見つけることができません。 DOM要素は、各コンポーネントの最初のレンダリングが完了するまで存在しません。コンポーネントの componentDidMount()が呼び出されるまで、このDOM要素またはその親要素については何も知ることができません。また

注コンポーネントがレンダリングされる順序。ツリー/コンポーネントのチェーンの最初のレンダリングでは、子のcomponentDidMount()の前に子のcomponentDidMount()が呼び出されます。子アイテム2.2.5.4用

(MenuItemSubmenu:handleRefSet)   appMenu:2.2.5.4 handleRefSet() 
(MenuItemSubmenu:componentDidMount)  appMenu:2.2.5.4 componentDidMount() 
(MenuPane:handleRefSet)     appMenu:2.2.5 handleRefSet() 
(MenuPane:componentDidMount)   appMenu:2.2.5 componentDidMount() 
(MenuItemSubmenu:handleRefSet)   appMenu:2.2.5 handleRefSet() 
(MenuItemSubmenu:componentDidMount)  appMenu:2.2.5 componentDidMount() 
(MenuPane:handleRefSet)     appMenu:2.2 handleRefSet() 
(MenuPane:componentDidMount)   appMenu:2.2 componentDidMount() 
(MenuItemSubmenu:handleRefSet)   appMenu:2.2 handleRefSet() 
(MenuItemSubmenu:componentDidMount)  appMenu:2.2 componentDidMount() 

componentDidMount()はその親項目2.2.5のためのその前に呼び出されます。ここでは、ネストされたメニューツリーからのログのスナップショットです。これから、子コンポーネントのすべての処理が完了するまで、親コンポーネントが独自のDOM要素を認識できないことがわかります。うわー、うわー！

しかし、あなたの質問を追求し、私は、コンポーネントのcomponentDidMount()方法にはいくつかのログを追加しました。私はthis.refToOurDom.parentElementを記録し、それが定義され、よく見えた！

(MenuItemSubmenu:handleRefSet) appMenu:2.2.5.4 parent dims: height 76 width 127 

だからあなたの質問への答えは、ノー、あなたのDOM要素はcomponentWillMount()にはまだ存在していないされ、親がレンダリング初期のいずれかが存在しません。コンポーネントの寸法を見つける前に、componentDidMount()が呼び出されるまで待つ必要があります。

しかしreact-dimensionsが使用するトリックを注意してください。おそらくそれはあなたのコードをどのように構造化するかを考えさせるでしょう。

render()の方法react-dimensionsは、を囲むコンポーネントに表示しないことがあります。最初のレンダリングでは、含まれるのは< div>だけです。 componentDidMount()が呼び出され、親の寸法が見つかると、のみが返され、次にが含まれているコンポーネントがレンダリングされます。となり、親の寸法を提供するになります。

もう1つの答えは、親の寸法を知るまでコンポーネントのコンテンツをレンダリングしないことです。 react-dimensionsを使用すると、寸法がわかるまでレンダリングされていないこともあります。しかし、componentDidMount()で参照を取得して寸法を把握し、寸法がわかるまでif(){}を実際のの内容をレンダリングするだけで同じことを行うこともできます。 （< div>が必要です。