React refsの詳細な紹介

1. 何ですか

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

ReactのRefs 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 = "こんにちは";

受信オブジェクト

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

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

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

定数ノード = 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を使用してコンポーネントを更新しますが、この方法は推奨されません。多くの場合、 propsとstateを使用して子要素を再レンダリングします。

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

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

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

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

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