• 本文
• リロード
• 差分
• バックアップ
• 名前変更
• リファラ
• 新規ページ
• 編集

React

React/Ref

Top / React / Ref

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

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

用途

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

使い方

Refを作成

React/クラスコンポーネント

• React.createRef
• refがrenderメソッドの要素に渡されるとアクセスできるようになる

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

Refへのアクセス

• myRef.currentでアクセス

refの値

HTML要素

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

  <input ref={this.inputRef}>

(カスタム)クラスコンポーネント

• class CustomTextInput extends React.Component {
    // ...
  }
  ...
   <CustomTextInput ref={this.inputRef}>

React/関数コンポーネント

• 関数コンポーネントに対しては使用してはいけない (インスタンスを持たないため)

  function MyFunctionComponent() {
    return <input />;
  }
  ...
    // これは動き「ません」！
    <MyFunctionComponent ref={this.inputRef}>

• 関数コンポーネントに対してrefを使いたい場合、forwardRefを使うかクラスに書き換える
• DOM要素またはクラスコンポーネントを参照している限り、関数コンポーネント内で ref 属性を使用することは可能
  • useRef

React.createRef

• React 16.3で導入
• React/クラスコンポーネントで使う

  class MyComponent extends React.Component {
    constructor(props) {
      super(props);
      this.myRef = React.createRef();
    }
    render() {
      return <div ref={this.myRef} />;
    }
  }

useRef

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

型

• https://qiita.com/hinako_n/items/d08a43674afb5969549b

React.RefObject?

• DOMの参照用

React.MutableRefObject?

• 値の保持に使う場合

React/コールバックRef

React/ref

• 参照先

React/関数コンポーネント

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

React/Refのフォワーディング

• あるコンポーネントを通じてその子コンポーネントのひとつに ref を自動的に渡すテクニック
• https://ja.reactjs.org/docs/forwarding-refs.html

React/コールバックRef