一度コンポーネントがレンダリングされるライフサイクルメソッド

Question

コンポーネントが完全にレンダリングされた後、特定の要素の正確な位置を取得するには、getBoundingClientRect()を使用する必要があります。

これにはどのライフサイクルメソッドを使用する必要がありますか？私はレンダリングが完了した後にcomponentDidMount()が呼び出されたとは思わない。

もっと分かりやすくするために、私が達成しようとしているのは次のとおりです。 私のコンポーネントはDIV要素のリストをレンダリングします。 30〜40人もの人がいる可能性があります。それらがレンダリングされると、特定の要素に自動的にスクロールしたいと思います。この要素は、レンダリングされたセクションの下部、中央、またはどこにでも配置できます。私はそれぞれのDIV要素をIDにするので、getBoundingClientReact()にその場所を知らせるのは簡単です。そのデータを取得したら、その場所にスクロールします。

UPDATE：

これは私のコードは次のようになります。

componentDidUpdate(prevProps, prevState) { 

    // Get the ID of the element I need to scroll to 
    const id = "divId-" + prevProps.myId; 

    // Find the rendered element 
    const element = document.getElementById(id); 

    // Get coordinates 
    const position = element.getBoundingClientRect(); 

    // Call scrollTo custom function to scroll to the element 
    scrollTo(position.top); 

    // Set the new location 
    this.props.actions.setLocation(position.top); 
} 

Answer 1

componentWillUpdate(prevProps, prevState)

componentWillUpdateは（）新しい 小道具や状態が受信されているとき、レンダリングの直前に呼び出されます。これを更新の前に準備を行う の機会として使用してください。このメソッドは、初期レンダリングでは とは呼ばれません。

または componentDidUpdate(prevProps, prevState)

コンポーネント が更新されたとき、DOMを操作する機会としてこれを使用してください。これは、現在の小道具を以前の小道具と比較する限り、ネットワークリクエストを として実行するのに適しています（小道具が変更されていない場合は、 ネットワークリクエストは不要です）。

が役立ちます。 hereで詳細を確認できます。