最終更新:2022-09-26 (月) 14:49:03 (10d)  

React/Ref
Top / React / Ref

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

https://ja.reactjs.org/docs/refs-and-the-dom.html

用途

  • フォーカス、テキストの選択およびメディアの再生の管理
  • アニメーションの発火
  • サードパーティの DOM ライブラリとの統合

使い方

Refを作成

クラスコンポーネント

  • React.createRef
    • this.myRef = React.createRef();
    • return <div ref={this.myRef} />;

関数コンポーネント

  • 関数コンポーネント (function components) には ref 属性を使用してはいけません。
  • なぜなら、関数コンポーネントはインスタンスを持たないからです
  • 関数コンポーネントに対してrefを使いたい場合、forwardRefを使うかクラスに書き換える
  • DOM要素またはクラスコンポーネントを参照している限り、関数コンポーネント内で ref 属性を使用することは可能

Refへのアクセス

  • myRef.currentでアクセス
  • コンポーネントがマウントされると React は current プロパティに DOM 要素を割り当て、マウントが解除されると null に戻します

React.createRef

useRef

  • 関数コンポーネントで使うフック

React.RefObject?

  • DOMの参照用

React.MutableRefObject?

  • 値の保持に使う場合

React/コールバックRef?

React/ref

  • 参照先

React/関数コンポーネント

  • 関数コンポーネントに対して ref が使用できるようにしたい場合は、forwardRef を(必要に応じて useImperativeHandle? と組み合わせて)利用するか、コンポーネントをクラスに書き換えます。

refのフォワーディング