return ステートメントでインライン JSX レンダリングを使用する場合の要素の幅の取得

Question

要素があり、その幅を計算し、少なくともビューポートの幅を満たすまでに何回かかるかを反復したいと考えています。

問題は、使用しているインライン JSX レンダリング スタイルでは幅を取得できないことです。依存関係として設定した場合でも、useEffect で refWidth is empty エラーが発生します。

最初に要素を return ステートメントに追加し、その幅を取得してから必要な数の要素を追加せずに、正しく計算してレンダリングする方法はありますか?

CodeSandbox へのリンクはこちら

Answer 1

インライン JSX レンダリングで要素の幅にアクセスするには、useLayoutEffect フックを使用できます。

リーリー

useLayoutEffect フックにより、要素のレンダリング後に幅の計算が行われるようになり、より正確な結果が得られます。