問題タブ [react-forwardref]

アプリの一部のメニューが展開されたときに静的にしたい固定位置のナビゲーションバーがあります。
問題は、両方のコンポーネントがアプリの階層構造で互いに遠く離れていることです。

私が書いたこのコンポーネントを使用しようとしています:

... 1 回はTextfieldof 型内selectで、もう 1 回はMenuコンポーネント内で。ただし、ブラウザでアクセスすると、次のエラーが発生します。

これを解決する方法について何か考えはありますか?

アップデート：

このコンポーネントを呼び出す方法は次のとおりです。

更新 2

エラースタックは次のとおりです。

いくつかの投稿や materail-ui Web サイトの例で言及されているように forwardRef を適用しましたが、コンソールにはまだ警告が表示されます。そして、私はその理由を本当に理解していません。

Material-UI リンク コンポーネントに埋め込まれた react-router リンクであるアイテムのリストを含むドロワーを作成しようとしています。私が作成したグローバル MUI テーマを活用するために、それらを埋め込んでいます。

PS : これは typescript コードです。Ref ストロングタイピングは地獄です ;-)

問題を再現する CODESANBOX はこちらです。ドロワーを表示するには、codesandbox ブラウザ ページを十分に拡張してください。

リンク コンポーネント

引き出し部品

引き出しと呼ぶホームページ

refs は、状態を変更せずに DOM 要素に直接アクセスするために使用されることを知っています。関数コンポーネントには状態がないため、参照を与えることはできないと読みました。

関数コンポーネントに参照を追加することはできません。ただし、ref を定義して、それらを DOM 要素またはクラス コンポーネントに添付することはできます。肝心なのは、関数コンポーネントにはインスタンスがないため、参照できないということです。

から取得: https://blog.logrocket.com/cleaning-up-the-dom-with-forwardref-in-react/

まだわかりません。

TooltipAnt Design のコンポーネント ( https://ant.design/components/tooltip/ )、Buttonコンポーネント、およびカスタムコンポーネントを使用していCircleButtonます。

次の JSX があるとします。

そして私の CircleButton コンポーネント。このように使用すると、警告が生成されます。

警告: 関数コンポーネントに参照を与えることはできません。この参照にアクセスしようとすると失敗します。React.forwardRef() を使用するつもりでしたか?

警告にもかかわらず、すべてが期待どおりに機能することに注意してください。

ただし、次のように編集すると正常に動作しますが、なぜですか?

divコンポーネントには状態がありますか? 理解できません。forwardRef何らかの魔法をかけて div 要素の状態を作成していますか?

refをコンポーネントに渡すと、Buttonそれでも警告が表示されるのはなぜですか?

antd Buttonを子として直接渡すと、機能します。しかし、これは、antd ボタンには状態があるため、参照を持つことができると思われるためです。