問題タブ [react-forwardref]

編集:この問題は、ForwardRef を Redux 接続と組み合わせて使用​​しようとしたために発生しました。解決策については、この投稿をご覧ください。

React.forwardRef を使用して、親コンポーネントの DOM 要素にアクセスしようとしています。問題は、最初のレンダリングの後でも ref.current が定義されないことです。

この親コンポーネントでは、子コンポーネントの 1 つから DOM 要素にアクセスしたいと考えています。

転送された参照を受け取るコンポーネント:

転送された参照から派生したデータを必要とするコンポーネント:

forwardRef が常に null または未定義であることを議論する既存の SO の質問への回答は、ref が最初のレンダリング後にのみ定義されることを指摘しています。useEffect は最初のレンダリングの後に実行する必要がありますが、bannerRef.current はまだ null であるため、これは問題ではないと思います。

通常の ref を使用して Banner コンポーネント内で使用すると、 useEffect フックで bannerIndent の値を設定するロジックが正しく機能します。ただし、(転送された参照を使用して生成された) bannerWidth を Banner コンポーネントの兄弟に渡すことができるように、参照を親コンポーネントに配置する必要があります。

助けていただければ幸いです:D

私の Gatsby サイトでは、すべてのページで同じ GSAP タイムラインを使用しているため、DRY を維持したいと考えており、レイアウト コンポーネントにタイムラインをその順序で含めることを考えています。

しかし、forwardRef を使用して子とレイアウトの間で必要な参照を渡す方法がわかりません。

要するに、ページとレイアウトの間のsectionsRef部分の扱い方がわかりません。sectionRef はページ コンテンツ (子) に依存しますが、レイアウト内のタイムラインで必要です。

これら2つの間でsectionRefを共有するにはどうすればよいですか(私は多くのことを試しましたが、常にエラーにつながります)?

レイアウトに参照がないコードサンドボックスは次のとおりです: https://codesandbox.io/s/jolly-almeida-njt2e?file=/src/pages/index.js

そして、レイアウト内の参照を含むサンドボックス: https://codesandbox.io/s/pensive-varahamihira-tc45m?file=/src/pages/index.js

これが私のファイルの簡略版です: Layout.js

index.js (ページ)

どんな手がかりも大歓迎です:)

ボタンでスタイル付きコンポーネント div を作成する必要があります。ボタンは div のサイズを生成します。次に、div コンポーネント内にネストされたコンポーネントがサイズを表示します。forwardRef を使用する必要があり、両方のコンポーネントが機能する必要があります。

基本コンポーネント コード:

コンポーネントは、props の幅と高さを持つ単純なスタイル付きコンポーネント div です。参照は問題なく取得されます。コンソールに出力でき、要素の現在のサイズが表示されます。しかし、innerRef.current.offsetWidth を介して幅/高さの値を取得しようとすると、前の世代の結果が取得されます。コードは次のとおりです。

どんな助けにも感謝します。私はあまりにも長い間答えを探していましたが、それほど難しい作業ではありません...