[解決済み] react-router-domを使用する際に「Function components cannot be given refs」を回避するにはどうすればよいですか?
2022-02-01 14:49:44
質問
以下のようなものがあります(マテリアルUIを使用)...。
import React from "react";
import { NavLink } from "react-router-dom";
import Tabs from "@material-ui/core/Tabs";
import Tab from "@material-ui/core/Tab";
function LinkTab(link){
return <Tab component={NavLink}
to={link.link}
label={link.label}
value={link.link}
key={link.link}
/>;
}
新しいバージョンでは、次のような警告が表示されます。
警告 関数コンポーネントに参照元を与えることはできません。アクセスしようとすると このrefは失敗します。React.forwardRef()を使用するつもりだったのでしょうか?
のrenderメソッドを確認してください。
ForwardRef
. in NavLink (ForwardRefで作成)
に変えてみたのですが・・・。
function LinkTab(link){
// See https://material-ui.com/guides/composition/#caveat-with-refs
const MyLink = React.forwardRef((props, ref) => <NavLink {...props} ref={ref} />);
return <Tab component={MyLink}
to={link.link}
label={link.label}
value={link.link}
key={link.link}
/>;
}
しかし、まだ警告が出ます。どうすればこの問題を解決できるのでしょうか?
解決方法を教えてください。
NavLink
から
react-router
を特殊化した機能部品です。
リンク
を公開する。
innerRef
プロパティを使用します。
// required for react-router-dom < 6.0.0
// see https://github.com/ReactTraining/react-router/issues/6056#issuecomment-435524678
const MyLink = React.forwardRef((props, ref) => <NavLink innerRef={ref} {...props} />);
また、私たちのドキュメントを検索して
react-router
につながる。
https://mui.com/getting-started/faq/#how-do-i-use-react-router
にリンクしています。
https://mui.com/components/buttons/#third-party-routing-library
. 最後のリンクは、動作例と、react-router v6でどのように変更される可能性があるのかを説明しています。
関連
-
[解決済み】無効な設定オブジェクトです。APIスキーマと一致しない設定オブジェクトを使用してWebpackが初期化されました。
-
[解決済み] テスト
-
[解決済み] React - 予想外のトークン、予想外の;
-
[解決済み] アクシオスは定義されていません
-
[解決済み] Cross-envでyarnの実行時にenv変数が変更されない。
-
[解決済み] componentDidUpdate'メソッドはいつ使用するのですか?
-
[解決済み] Reactルータを使ったプログラムによるナビゲーション
-
[解決済み] React-routerのURLを更新したり、手動で書き込んだりするとうまくいかない
-
[解決済み] Reactコンポーネントに条件付きで属性を追加するにはどうすればよいですか?
-
[解決済み] React Router v4で履歴にプッシュする方法は?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】Reactコンポーネント内でswitchステートメントを使用するには?
-
[解決済み] FontAwesomeの無料パッケージに含まれているアイコンのオブジェクト名はどこにあるのですか?
-
[解決済み] formcontrollabel - material-ui | Reactのデフォルトのtypography classを変更するには?
-
[解決済み] componentWillReceiveProps は名称が変更されました。
-
[解決済み] axios-mock-adapter onGet mock data not effective.
-
[解決済み] は、gatsby-imageで動作する良いreactのカルーセルコンポーネントはありますか?[って聞かれます。]
-
[解決済み] Error: yarn start - エラー コマンド "start" が見つかりません。
-
[解決済み] create-react-appビルドスクリプトを実行する際に、ビルド.env変数を設定するには?
-
[解決済み] Reactプロジェクトに.envファイルを追加する
-
[解決済み] ESLintとTSLintの違い【クローズド】について