logo

TechCodeview

反応参照

Refs は以下に使用される短縮形です。 参考文献 リアクトで。に似ています キー リアクトで。これは、特定の DOM ノードまたは React 要素への参照を保存できるようにする属性です。 React DOM ノードまたは React 要素にアクセスする方法と、それを操作する方法を提供します。これは、props を使用せずに子コンポーネントの値を変更する場合に使用されます。

参照を使用する場合

Ref は次の場合に使用できます。

  • フォーカス、テキスト選択、メディア再生の管理など、DOM 測定が必要な場合。
  • これは、命令型アニメーションをトリガーする際に使用されます。
  • サードパーティの DOM ライブラリと統合する場合。
  • コールバックでも同様に使用できます。

Ref を使用しない場合

  • 可能な限りその使用は避けるべきです 宣言的に 。たとえば、を使用する代わりに、 開ける（） そして 近い（） Dialog コンポーネントのメソッドの場合は、 開いています それに支えます。
  • Ref の過度の使用は避けなければなりません。

参照の作成方法

React では、Ref を次のように作成できます。 React.createRef() 。これは、次の方法で React 要素に割り当てることができます。 参照 属性。通常、コンポーネントの作成時にインスタンス プロパティに割り当てられ、コンポーネント全体で参照できます。

 class MyComponent extends React.Component { constructor(props) { super(props); this.callRef = React.createRef(); } render() { return ; } }

参照にアクセスする方法

React では、ref が render メソッド内の要素に渡されると、ref の現在の属性を介してノードへの参照にアクセスできます。

 const node = this.callRef.current;

現在のプロパティを参照

ref 値はノードのタイプによって異なります。

  • HTML 要素で ref 属性が使用されている場合、ref は次のように作成されます。 React.createRef() 基礎となる DOM 要素をその要素として受け取ります。 現在 財産。
  • ref 属性がカスタム クラス コンポーネントで使用されている場合、ref オブジェクトは 取り付けられた コンポーネントのインスタンスを現在のプロパティとして指定します。
  • ref 属性は次の場合には使用できません。 機能コンポーネント 実例がないからです。

DOM 要素に Ref を追加する

以下の例では、DOM ノードまたは要素への参照を保存するための ref を追加しています。

 import React, { Component } from &apos;react&apos;; import { render } from &apos;react-dom&apos;; class App extends React.Component { constructor(props) { super(props); this.callRef = React.createRef(); this.addingRefInput = this.addingRefInput.bind(this); } addingRefInput() { this.callRef.current.focus(); } render() { return ( <h2>Adding Ref to DOM element</h2> ); } } export default App;

出力

反応参照

クラスコンポーネントにRefを追加

以下の例では、クラス コンポーネントへの参照を保存するための ref を追加しています。

例

 import React, { Component } from &apos;react&apos;; import { render } from &apos;react-dom&apos;; function CustomInput(props) { let callRefInput = React.createRef(); function handleClick() { callRefInput.current.focus(); } return ( <h2>Adding Ref to Class Component</h2> ); } class App extends React.Component { constructor(props) { super(props); this.callRefInput = React.createRef(); } focusRefInput() { this.callRefInput.current.focus(); } render() { return ( ); } } export default App;

出力

反応参照

コールバック参照

React では、「」と呼ばれる refs を使用する別の方法があります。 コールバック参照 ' 参照が次の場合に、より詳細な制御が可能になります。 セット そして 設定を解除する 。 createRef() メソッドで ref を作成する代わりに、React ではコンポーネントの ref 属性にコールバック関数を渡すことで ref を作成する方法が可能です。以下のコードのようになります。

 this.callRefInput = element} /&gt;

コールバック関数は、DOM ノードへの参照をインスタンス プロパティに保存するために使用され、他の場所からアクセスできます。以下のようにアクセスできます。

 this.callRefInput.value

以下の例は、コールバック参照の動作を理解するのに役立ちます。

 import React, { Component } from &apos;react&apos;; import { render } from &apos;react-dom&apos;; class App extends React.Component { constructor(props) { super(props); this.callRefInput = null; this.setInputRef = element =&gt; { this.callRefInput = element; }; this.focusRefInput = () =&gt; { //Focus the input using the raw DOM API if (this.callRefInput) this.callRefInput.focus(); }; } componentDidMount() { //autofocus of the input on mount this.focusRefInput(); } render() { return ( <h2>Callback Refs Example</h2> ); } } export default App;

上記の例では、React は、コンポーネントが マウントする 、コンポーネントが アンマウントする 、それを呼び出します ヌル 。審判はいつも 最新の の前に コンポーネントDidMount または コンポーネントDidUpdate 火災が発生します。コンポーネント間のコールバック ref の受け渡しは、React.createRef() で作成されるオブジェクト ref を操作する場合と同じです。

出力

反応参照

あるコンポーネントから別のコンポーネントへの Ref の転送

参照転送は、 参照 コンポーネントを介して、その子コンポーネントの 1 つに到達します。を利用して実行できます。 React.forwardRef() 方法。このテクニックは特に次の場合に役立ちます。 高次成分 特に再利用可能なコンポーネント ライブラリで使用されます。最も一般的な例を以下に示します。

例

 import React, { Component } from &apos;react&apos;; import { render } from &apos;react-dom&apos;; const TextInput = React.forwardRef((props, ref) =&gt; ( )); const inputRef = React.createRef(); class CustomTextInput extends React.Component { handleSubmit = e =&gt; { e.preventDefault(); console.log(inputRef.current.value); }; render() { return ( this.handleSubmit(e)}&gt; Submit ); } } export default App;

上の例では、コンポーネントがあります テキスト入力 入力フィールドとして子を持っています。ここで、渡すか転送するには、 参照 入力まで、まず ref を作成し、次に ref を渡します。 。その後、React は ref を 前方参照 2番目の引数として関数を指定します。次に、この ref 引数を下に転送します。 。これで、DOM ノードの値に次の場所でアクセスできるようになりました。 入力参照電流 。

useRef() で反応する

で紹介されています 反応16.7 以降のバージョン。これは DOM ノードまたは要素にアクセスするのに役立ち、入力要素にフォーカスしたり、入力要素の値にアクセスしたりするなど、その DOM ノードまたは要素を操作できるようになります。 ref オブジェクトを返します。 。現在 プロパティは渡された引数に初期化されます。返されたオブジェクトは、コンポーネントの存続期間中存続します。

構文

 const refContainer = useRef(initialValue);

例

以下のコードでは、 useRef 変数に代入される関数です。 入力参照 を作成し、参照する HTML 要素内の ref という属性にアタッチします。

 function useRefExample() { const inputRef= useRef(null); const onButtonClick = () =&gt; { inputRef.current.focus(); }; return ( Submit ); }