問題タブ [react-forwardref]

そのため、Material.ui から Modal を実装し、小道具として渡されたものに基づいて、モーダル内にさまざまなコンポーネントをマウントしようとしています。これを行うと、「関数コンポーネントに参照を与えることはできません。この参照にアクセスしようとすると失敗します。React.forwardRef() を使用するつもりでしたか?」というエラー メッセージを受け取りました。

React.forwardRef() の使用方法を理解しようとしました - たとえば、このスレッドを読みました(React で forwardRef() を使用するにはどうすればよいですか? ) - しかし、実際にそれを実装する方法を理解できませんでした具体的にコードします。

React.forwardRef() を実装してエラーを取り除く方法について、助けていただければ幸いです。

これが私たちのコードです（モーダル）

ここにモーダルをマウントします

これが EditTask コンポーネントです

MenuItemMUI を別のコンポーネントと組み合わせてSelectレンダリングすると、MUI に関する問題が発生します。

コードサンドボックスはこちら

基本的に、私は次のようなものを持っています：

そして、これはカスタム項目です:

最初は ref なしでこれを実行しましたが、コンソールにエラーが表示されたWarning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?ので ( )、しばらくグーグルで調べたところ、この ref を渡す必要があることがわかりました。...restまた、小道具が必要であることを理解しているので、小道具のも渡しMenuItemます。

予想される動作: をクリックするとMenuItem、コンポーネントで選択されSelectます。

実際の動作: 何も起こりません。

問題は、CustomMenuItem再利用可能にするために を作成したことです。しかし、その前に、次のような単純な関数がありました。これは inと in のrenderItem両方で使用し、同じコードで、同じ JSX ツリーを返しました。そして、それはうまくいきましたが、何らかの理由で今はうまくいきません。だから私がするなら：Select.renderValueuserIds.mapCustomMenuItem

それは単に動作します:(

ここで何か不足していますか？

私はこのインターフェースを持っています:

そして、この関数コンポーネント:

私の目標はCustomComponent、別のコンポーネントからこれにアクセスすることです。インターフェイス内に追加しようとしましref: React.createRef<any>たが、クリックしませんでした。私の調査によると、使用する必要があるようforwardRefですが、オンラインの例のほとんどは機能していないようです。CustomComponentこのように、別のコンポーネントから外部から参照するにはどうすればよいですか?

areaRefを使用する必要があるエラーをスローしますforwardRef。

こんにちは、 forwardRef を子コンポーネントに追加しようとしていましたが、 forwardRef を追加すると次のようになります。 TypeError: Component is not a function

コンポーネントは次のように定義されます。

スタックトレースは次のとおりです。

このコンポーネントに forwardRef を追加するために変更する必要があるものはありますか?