reactにおけるrefsの使用について

reactでは、refsを用いてdomにアクセスしたり、renderでreactオブジェクトを作成したりすることができる.
refsを使う主な用途は?

いくつかのアニメーションのインタラクションをします.

メディアコントロールの再生

フォーカスを取得し、テキストを取得するなどの

refsを使う方法は二つあります.一つは使用です.React.createRef() API、もう一つは使用です. refsまず第一の方法を紹介します.React.createRef() APIを使います.

import React, { Component } from 'react'
export default class App extends React.Component {
  constructor(props) {
    super(props);
    //      ref     textInput   DOM   
    this.textInput = React.createRef();
    this.focusTextInput = this.focusTextInput.bind(this);
  }

  focusTextInput() {
    //        API   text        
    //   ：     "current"     DOM   
    this.textInput.current.focus();
    console.log(this.textInput.current);//    input dom  
  }

  render() {
    //    React       ref    
    //         `textInput`  
    return (
      

        

        
      
    );
   }
 }

二つ目は Refs、Reactはコンポーネントをマウントすると、refコールバック関数を呼び出してDOM要素に入ります.アンインストール時に呼び出してnullに入ります.component DidMountまたはcomponent DidUpdateトリガ前に、Reactはrefsが最新のものであることを保証します.

import React, { Component } from 'react'
export default class App extends React.Component {
  constructor(props) {
    super(props);
    //      ref     textInput   DOM   
    this.textInput = null;
    this.setTextInputRef = element => {
      this.textInput = element;
    };
    this.focusTextInput = () => {
      //      DOM API   text        
      if (this.textInput) this.textInput.focus();
    };
  }

  componentDidMount() {
    //      ，          
    this.focusTextInput();
  }

  render() {
    //    `ref`        text     DOM          React
    //    （   this.textInput）
    return (
      

        
        
      
    );
  }
}

後に、親子のコンポーネントはどうやってrefsを伝えますか?コンポーネント間でフィードバック形式のrefsを伝えることができます.コードは以下の通りです.

import React, { Component } from 'react'
function CustomTextInput(props) {
  return (
    

      
    
  );
}

class App extends React.Component {
  constructor(props) {
    super(props);
    //      ref     textInput   DOM   
    this.inputElement = null;
    this.setTextInputRef = element => {
      this.inputElement = element;
    };
    this.focusTextInput = () => {
      //      DOM API   text        
      console.log(this.inputElement)
      if (this.inputElement) this.inputElement.focus();
    };
  }
  componentDidMount() {
    //      ，          
    this.focusTextInput();
  }
  render() {
    return (
      
 
       this.inputElement = el}
      />
      
      
    );
  }
}

上記の例では、Appはそのrefsコールバック関数をinputRef propsとしてCustoom TextInputに伝達し、Custom TextInputは同じ関数を特殊なref属性として伝達した.その結果、Appのthis.input ElementはCustom TextInputのinput元素に対応するDOMノードに設定されます.
使用React.forwardRefは、転送refを取得し、Reactは、fowardRef内関数(props,ref)=>…、その第2のパラメータとして、レンダリングされたDOMに転送する.

import React, { Component } from 'react'
const CustomTextInput = React.forwardRef((props, ref) => (
  

      
   
));

class App extends React.Component {
  constructor(props) {
    super(props);
    //      ref     textInput   DOM   
    this.inputElement = React.createRef();
    this.focusTextInput = () => {
      //      DOM API   text        
      console.log(this.inputElement)
      this.inputElement.current.focus();
    };
  }

  render() {
    return (
      
 
      
      
      
    );
  }
}