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 で複数の主キーが定義されているエラーの解決方法

推薦する

Vue.jsは9グリッド画像表示モジュールを実装します

Vue.js を使用して、クリックしてズームできる 9 グリッドの画像表示モジュールを作成しました。...

MySQL 8.0.19 winx64 インストールチュートリアルと Windows 10 での初期パスワードの変更

この記事では、参考までにMySQL 8.0.19 winx64のインストールチュートリアルを紹介しま...

CSS3でハートを描く

成果を達成する要件/機能: CSS + HTML を使用してハートを描く方法。分析:正方形と 2 つ...

JavaScriptの詳細な説明 thisキーワード

目次1. はじめに2.これを理解する3. これは誰ですか? 4.矢印関数はさらに読む要約する1. は...

docker を使用してコード サーバーをデプロイする方法

画像をプルする # docker pull codercom/code-server # Docke...

Nginx プロセス スケジューリングの問題の詳細な説明

Nginx は、マスター プロセス (MasterProcess) と、同じ数のホスト CPU コア...

vue.js でよく使われる v 命令の解析

目次Vue でのモデルバインド表示の if の v-text の説明v-html: v-オンv-if...

指定された期間内のすべての日付または月を取得する MySQL ステートメント (ストアド プロシージャの設定やテーブルの追加は不要)

mysql は期間内のすべての日付または月を取得します1: mysqlは期間内のすべての月を取得し...

CSS3 の transition、transform、translate の違いと機能の簡単な分析

変換して翻訳するTransform は、変換と変形を意味します。他の幅属性や高さ属性と同様に、CSS...

JavaScript 関数のパフォーマンスを測定するさまざまな方法の比較

目次概要パフォーマンス.nowコンソール.time時間精度を短縮注意事項分割して征服する入力値に注意...

MySQLが日付フィールドインデックスを使用しない理由の要約

目次背景探検する要約する背景テーブルでは、dataTime フィールドは varchar 型に設定さ...

Linuxのバージョン情報を復号化する方法

Linux バージョンに関する情報を表示および解釈するのは、見た目よりも少し複雑です。単純なバージョ...

MySQLでテーブル名を変更する方法と注意すべき点

目次1. テーブル名を変更する方法2. 注記要約: 1. テーブル名を変更する方法RENAME TA...

MySQL で SQL 文の実行時間を表示する方法

目次1. 初期SQLの準備2.MysqlはSQL文の実行時間をチェックします3. さまざまなクエリの...

JS正規RegExpオブジェクトについての簡単な説明

目次1. RegExpオブジェクト2. 文法2.1 定義2.2 修飾子2.3 角括弧2.4 メタ文字...