ReactでのRefの使用_05

ReactにおけるRefの使用React v 16.6.3
典型的なReactデータストリームでは、propsは親コンポーネントとそのサブコンポーネントが相互作用する唯一の方法である.サブアイテムを変更するには、new propsを使用して再表示します.ただし、場合によっては、通常のデータ・ストリーム以外のサブアイテムを強制的に変更する必要があります.変更するサブアイテムは、Reactコンポーネントのインスタンスであってもよいし、DOM要素であってもよい.どちらの場合もReactはapiを提供しています.
refsの使用方法
refsにはいくつかの良い例があります.

1.テキスト選択またはメディア再生.

2.必須のアニメーションをトリガします.

3.サードパーティ製DOMライブラリとの統合.

宣言的に完了できる任意の操作にrefsを使用しないでください.
*Refsを過度に使用しない
旧API:文字列参照
Reactを使用したことがある場合は、ref属性が文字列「textInput」であり、DOMノードがthisにアクセスする古いAPIを熟知している可能性があります.refs.textInput.文字列参照に問題があるため、問題が残っていると考えられ、将来のバージョンで削除される可能性が高いため、使用しないことをお勧めします.
コールバックリファレンス
コンポーネントがインストールされると、ReactはDOM要素を使用してrefコールバックを呼び出し、アンインストール時にnullを呼び出します.Refsは、componentDidMountまたはcomponentDidUpdateがトリガーされる前に最新であることを保証する.

class CustomTextInput extends React.Component {
  constructor(props) {
    super(props);

    this.textInput = null;

    this.setTextInputRef = element => {
      this.textInput = element;
    };

    this.focusTextInput = () => {
      // Focus the text input using the raw DOM API
      if (this.textInput) this.textInput.focus();
    };
  }

  componentDidMount() {
    // autofocus the input on mount
    this.focusTextInput();
  }

  render() {
    // Use the `ref` callback to store a reference to the text input DOM
    // element in an instance field (for example, this.textInput).
    return (
      

        
        
      
    );
  }
}

refs例--クリックしてinputフォーカスを取得

class Example extends React.Component {
  handleClick() {
    //       DOM API     
    this.refs.myInput.focus
    ();
  }
  render() {
    //         DOM  ，ref               this.refs
    return (
      

        
        
      
    );
  }
}

Reactを使用します.createRef()
React.createRef()React 16.3に導入されたAPI.以前のバージョンのReactを使用している場合は、コールバックリファレンスを使用することをお勧めします.
Reactを作成します.createRef()
Refsはプロパティを使用して作成されましたcreateRef()を作成し、ref属性でReact要素に添付します.コンポーネントを構築する際には、通常、インスタンス属性にRefsが割り当てられ、コンポーネント全体で参照できるようになります.

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

访问ref

当ref被传递给元素时render，对该节点的引用变得可以在currentref 的属性处访问

const node = this.myRef.current;

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

refHTML要素でこの属性を使用すると、構造関数で作成するrefの属性がReactされる.createRef()は、そのcurrent属性として最下位のDOM要素を受信する.

refカスタムクラスコンポーネントでこのプロパティを使用すると、refオブジェクトは受信コンポーネントのインストール済みインスタンスをcurrentとします.

インスタンスがないため、refは関数コンポーネントでこのプロパティを使用できません.

class CustomTextInput extends React.Component {
  constructor(props) {
    super(props);
    // create a ref to store the textInput DOM element
    this.textInput = React.createRef();
    this.focusTextInput = this.focusTextInput.bind(this);
  }

  focusTextInput() {
    // Explicitly focus the text input using the raw DOM API
    // Note: we're accessing "current" to get the DOM node
    this.textInput.current.focus();
  }

  render() {
    // tell React that we want to associate the  ref
    // with the `textInput` that we created in the constructor
    return (
      

        

        
      
    );
  }
}

Currentコンポーネントがインストールされると、ReactはそのプロパティにDOM要素を割り当て、nullはアンインストール時に割り当てます.ref更新が発生する前にcomponentDidMountまたはcomponentDidUpdateライフサイクルメソッド.
関数コンポーネントでrefプロパティを使用できません

function MyFunctionComponent() {
  return ;
}

class Parent extends React.Component {
  constructor(props) {
    super(props);
    this.textInput = React.createRef();
  }
  render() {
    // This will *not* work!
    return (
      
    );
  }
}

**参照が必要な場合は、ライフサイクルメソッドまたはステータスが必要な場合と同様に、コンポーネントをクラスに変換する必要があります.ただし、DOM要素またはクラスコンポーネントを参照すると、関数コンポーネントでrefプロパティを使用できます:**

function CustomTextInput(props) {
  // textInput must be declared here so the ref can refer to it
  let textInput = React.createRef();

  function handleClick() {
    textInput.current.focus();
  }

  return (
    

      

      
    
  );
}

親コンポーネントへのDOMリファレンスの公開
ごく少数の場合、親コンポーネントから子ノードのDOMノードにアクセスしたい場合があります.コンポーネントパッケージを破壊するため、通常は推奨されませんが、フォーカスまたは測定子DOMノードのサイズまたは位置をトリガするためにたまに使用できます.
サブコンポーネントに参照を追加できますが、DOMノードではなくコンポーネントインスタンスしか得られないため、理想的な解決策ではありません.また、これは機能コンポーネントには適用されません.
React 16.3以降を使用する場合は、ref forwardingを使用することをお勧めします.リファレンス転送では、コンポーネントが任意のサブコンポーネントのリファレンスを自分のコンポーネントとして公開することを選択できます.サブDOMノードを親コンポーネントに公開する方法の詳細な例は、ref転送ドキュメントにあります.
React 16.2以降を使用する場合、またはref転送よりも柔軟性が必要な場合は、この代替方法を使用して、refを異なる名前のpropとして明確に渡すことができます.
可能であればDOMノードを露出しないことをお勧めしますが、有用な脱出室であることができます.この方法では、サブコンポーネントにコードを追加する必要があります.サブアセンブリ実装を完全に制御できない場合は、findDOMNode()を使用しますが、StrictModeの使用は奨励されません.