React refsの詳細な紹介

React refsの詳細な紹介

1. 何ですか

Refs 、コンピューターでは Resilient File System (ReFS​​) と呼ばれます。

ReactRefs renderメソッドで作成されたDOMノードまたはReact要素にアクセスできるようにする方法を提供します。

本質は、 ReactDOM.render()によって返されるコンポーネント インスタンスです。レンダリングされたコンポーネントの場合は、 domインスタンスを返します。DOM レンダリングの場合は、特定のdomノードを返します。

2. 使い方

refを作成するには 3 つの方法があります。

  • 文字列を渡し、this.refs によって渡された文字列の形式で対応する要素を取得します。
  • オブジェクトが渡されます。オブジェクトは React.createRef() によって作成されます。使用すると、作成されたオブジェクトの現在の属性は対応する要素になります。
  • DOM がマウントされたときにコールバックされる関数を渡します。この関数は、それ自体で保存できる要素オブジェクトを渡します。使用するときは、以前に保存した要素オブジェクトを直接取得するだけです。
  • フックを渡すと、フックはuseRef()メソッドによって作成され、使用されると、生成されたフックオブジェクトの現在の属性は対応する要素になります。

文字列を渡す

対応する要素またはコンポーネントにref属性を追加するだけです

クラスMyComponentはReact.Componentを拡張します。
  コンストラクタ(props) {
    スーパー(小道具);
    this.myRef = React.createRef();
  }
  与える() {
    <div ref="myref" /> を返します。
  }
}

現在のノードにアクセスする方法は次のとおりです。

this.refs.myref.innerHTML = "こんにちは";

受信オブジェクト

refsReact.createRef()で作成され、次のようにref属性がReact要素に追加されます。

クラスMyComponentはReact.Componentを拡張します。
  コンストラクタ(props) {
    スーパー(小道具);
    this.myRef = React.createRef();
  }
  与える() {
    <div ref={this.myRef} /> を返します。
  }
}

refrender内の要素に渡されると、そのノードへの参照はrefcurrentプロパティでアクセス可能になります。

定数ノード = this.myRef.current;

関数を渡す

refが関数として渡されると、レンダリングプロセス中に、コールバック関数パラメータは要素オブジェクトを渡し、インスタンスを通じてオブジェクトを保存します。

クラスMyComponentはReact.Componentを拡張します。
  コンストラクタ(props) {
    スーパー(小道具);
    this.myRef = React.createRef();
  }
  与える() {
    <div ref={element => this.myref = element} /> を返します。
  }
}

refオブジェクトを取得するには、以前に保存したオブジェクトを渡すだけです。

定数ノード = this.myref

フックを渡す

useRefを通じてrefを作成します。全体的な使用法はReact.createRefと一致します。

関数App(props) {
  定数 myref = useRef()
  戻る (
    <>
      <div ref={myref}></div>
    </>
  )
}

ref属性の取得は、 hookオブジェクトのcurrent属性を通じても行われます。

定数ノード = myref.current;

上記の 3 つのケースでは、ネイティブHTML要素でref属性が使用されます。ref ref設定されたコンポーネントがクラス コンポーネントの場合、 refオブジェクトはコンポーネントのマウントされたインスタンスを受け取ります。

関数コンポーネントにはインスタンスがないため、 ref属性を使用できないことに注意してください。

3. 応用シナリオ

場合によっては、 refsを使用してコンポーネントを更新しますが、この方法は推奨されません。多くの場合、 propsstateを使用して子要素を再レンダリングします。

refsを過度に使用すると、コンポーネント インスタンスまたはDOM構造が公開され、コンポーネントのカプセル化の原則に違反することになります。

たとえば、 Dialogコンポーネントでopen()メソッドとclose()メソッドを公開することは避け、 isOpenプロパティを渡す方がよいでしょう。

しかし、 refs次のシナリオで非常に役立ちます。

  • フォーカス制御、コンテンツ選択、DOM要素の制御
  • Dom要素のコンテンツ設定とメディア再生
  • DOM要素とコンポーネントインスタンスに対する操作
  • サードパーティのDOMライブラリを統合する

React refsの理解に関するこの記事はこれで終わりです。React refsの理解についてさらに詳しく知りたい方は、123WORDPRESS.COMの過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも123WORDPRESS.COMをよろしくお願いいたします。

以下もご興味があるかもしれません:
  • React の 3 つの主要属性における Ref の使用に関する詳細な説明
  • React における ref の一般的な使用法の概要
  • React で refs を使用するチュートリアル
  • Reactコンポーネントrefsの使用に関する詳細な説明
  • React の Refs 属性をご存知ですか?

<<:  CentOS 7 に PHP5 用の suPHP をインストールする方法 (Peng Ge)

>>:  MySQL で複数の主キーが定義されているエラーの解決方法

推薦する

MySQL 5.7.23 のインストールと設定方法のグラフィックチュートリアル

この記事では、参考として MySQL 5.7.23 のインストール チュートリアルを記録します。 1...

CSS3 でテキストの点滅効果を実現する 3 つの方法 サンプルコード

1. 透明度を変更してテキストを徐々に点滅させると、次のような効果が得られます。 <!DOCT...

XHTML+CSS Web ページ作成における美しいスタイルシートの適用

これはかなり前に書かれた記事です。今となっては、その中の考え方は学ぶ価値があるように思えます。jb5...

docker compose サービスの起動順序を制御する方法

まとめDocker-compose は複数の Docker コンテナ サービスを簡単に組み合わせるこ...

CSS における @ の使用法の概要 (例と説明付き)

@ ルールは、CSS の実行または動作に関する指示を提供する宣言です。各宣言は @ で始まり、その...

CSS 表示テーブルの適応的な高さと幅の問題の解決策

定義と使用法display プロパティは、要素が生成するボックスのタイプを指定します。例示するこの属...

Centos7のシステム言語を簡体字中国語に変更する方法

例示するシステムを自分でインストールする場合は、通常、システム言語をカスタマイズできます。ただし、ク...

Windows 版 MySQL のインストール、起動、基本設定に関する詳細なグラフィック チュートリアル

ダウンロード:ステップ 1: ウェブサイトを開きます (ダウンロードするには公式ウェブサイトにアクセ...

MySQL の例 DTID マスタースレーブ原理の分析

目次1. GTIDの基本概念2. GTIDの利点3. GTIDの仕組み4. 従来のレプリケーションに...

JavaScriptを使用して独自のAjax関数を定義する

ネイティブJSによって開始されたネットワークリクエストは、クエリ文字列の形でサーバーに送信されるため...

CentOS7にMySQL 8.0.26をインストールする手順

1. まず、お使いのマシンに応じて、MySQL 公式サイトから対応するデータベースをダウンロードしま...

react+antdプロジェクトをゼロから構築する方法を教えます

これまでの記事はすべて私自身の学習記録であり、主に以前に遭遇した落とし穴を忘れないようにするためのも...

js のループメソッドとさまざまなトラバーサルメソッド

目次forループwhileループdo-while ループループのネストトラバーサルメソッド~のために...

Docker データ管理 (データ ボリュームとデータ ボリューム コンテナー) の詳細な説明

実稼働環境で Docker を使用する場合、多くの場合、データを複数のコンテナ間で永続化または共有す...