これは React で繰り返し発生する問題です。このcomponentDidMount
メソッドは、コンポーネントが初めてレンダリングされるときに必ず起動されることが保証されているため、高さやオフセットなどの DOM 測定値を取得するのに自然な場所のように思えます。ただし、コンポーネントのライフサイクルのこの時点で、間違ったスタイルの読み取り値を受け取ることがよくあります。デバッガーを中断すると、コンポーネントはDOM にありますが、まだ画面に描画されていません。ほとんどの場合、幅/高さが 100% に設定されている要素でこの問題が発生します。測定を行うと、componentDidUpdate
すべて正常に動作しますが、このメソッドはコンポーネントの最初のレンダリングで起動しません。
だから私の質問は -componentDidMount
すべてのブラウザの描画が完了した後に明らかに起動されないため、いつ正確に起動されるかです。
編集: この Stackoverflow の問題は、同じ主題を扱っています。
また、何が起こるかを説明するこの github の会話も参照しています。