Reactでrefオブジェクトが生成されるタイミングについて

Question

refを使い、コンポーネントが生成されたと同時に、同じコンポーネント内にある要素の高さを取得して別の要素のCSSを更新しようとしています。
TypeScript, Style Component(4.1.5)を併用しています。

refオブジェクトをあらかじめ以下のように作っておき、 componentDidMount()内で呼び出そうと思ったのですが、呼び出す際に current の中がnullになってしまうようで、DOMの操作ができません。

import React, {RefObject} from 'react';
import { styled } from '@this/constants/themes';

class SampleComponent extends React.Component<Props> {

  private rightNaviRef = React.createRef<HTMLDivElement>();

  componentDidMount() {
    node = this.rightNaviRef.current!.firstElementChild!.clientHeight + 40;
    ...
  }

  render() {
    <RightNavi ref={this.rightNaviRef}>
        ...
    </RightNavi>
  }
}

const RightNavi = styled.div`
  width: ${rightNaviWidth};
  margin-left: 20px;
  padding: 10px 20px;
  ...
`;

Uncaught TypeError: Cannot read property 'firstElementChild' of null

試したこと

refを使わず、RightNaviにIDを付与したうえでdocument.getElementById()で呼んでみたのですが、やはり返ってくる値がnullでした。このため、ReactライフサイクルにおいてDOMがレンダリングできていない段階で呼び出しを行っていることが原因ではないかと思っています。
そこで、 componentDidMount()を componentDidUpdate() に変えてみたのですが、同じエラーとなってしまいました。
refをコンポーネントが生成されたと同時に呼び出したい場合、どのような処理を使えばよいでしょうか？

Answer 1

ReactライフサイクルにおいてDOMがレンダリングできていない段階で呼び出しを行っていることが原因ではないかと思っています。

いえ、refが入るのであれば、componentDidMountの段階では確実に取得可能です。おそらく、styled-componentの方の問題でうまくrefが入らなくなっているのではないかと思います。

Comments

[Udomomo]

ありがとうございます。refの書き方に問題がないと切り分けられたのは大きな進歩でした。
調べてみたところ、当該コンポーネントの親コンポーネントでrefオブジェクトが再定義され型が上書きされていたことが原因である可能性が高いとわかりました。