React コンポーネントの参照の使用方法

今回は React コンポーネント ref の使い方と、React コンポーネント ref を使用する際の 注意事項 について説明します。以下は実際的なケースです。

ref 名前が示すように、実際にはコンポーネントへの参照として見ることができ、またロゴであるとも言えます。コンポーネントの属性として、その属性値は

string または関数にすることができます。

実際には、ref の使用は必要ありません。 ref を使用して実装された関数は他のメソッドにも変換できるため、これが適用できるシナリオであっても、その必要はありません。ただし、ref には適用可能なシナリオがあるため、ref には独自の利点があることを意味します。これと ref の該当するシナリオに関して、公式ドキュメントには次のように書かれています:

render メソッドから UI 構造を返した後、React 仮想 DOM の制限を突破して、 によって返されたコンポーネント インスタンスで何かを呼び出すことができます。レンダリングメソッド。一般に、これはアプリケーションのデータ フローには必要ありません。これは、リアクティブ データ フローにより、最新のプロパティが render() からの各子出力に常に確実に渡されるためです。ただし、このアプローチを使用することが必要または有益なシナリオがまだいくつかあります。レンダリングされたコンポーネントの DOM マークアップ (DOM 識別 ID と考えることができます) を見つける、大規模な非 React アプリケーションで React コンポーネントを使用する、または、既存のコードを React に追加します。

そのようなシナリオを見てみましょう (次の例は ref を説明するためによく使用されるため、以下で説明するシナリオはより古典的であることがわかります): 要素の値が設定されます。イベントが空の文字列の場合、 要素がフォーカスされます。

var App = React.createClass({
  getInitialState: function() {
   return {userInput: ''};
  },
  handleChange: function(e) {
   this.setState({userInput: e.target.value});
  },
  clearAndFocusInput: function() {
   this.setState({userInput: ''}); // 设置值为空字符串
        //这里想要实现获得焦点   
  },
  render: function() {
   return (
    <p>
     <input
      value={this.state.userInput}
      onChange={this.handleChange}
     />
          <input type="button"
           value="Reset And Focus"
           onClick={this.clearAndFocusInput}
        />
    </p>
   );
  }
 });

上記の例では、ボタンをクリックして値を空の文字列に設定するように入力要素に通知するように実装しましたが、フォーカスを取得する入力要素はまだ実装していません。 render() で返されるのはサブコンポーネントの実際の組み合わせではなく、特定の時点での特定のインスタンスの説明にすぎないため、これを実装するのは少し困難です。この文は非常にわかりにくいように思えます。実際、render は実際の DOM ではなく仮想 DOM を返します。したがって、render() から返されるコンポーネントだけに注目する必要はありません。

そういえば、集中力を高める方法についてはあまり役に立ちません。フォーカスを取得する機能を実現するには、ref を使用する必要があります。 ref 値には 2 種類あり、1 つは文字列、もう 1 つは

コールバック関数であると上で説明しました。

ref 文字列属性

React は、render() によって返されるコンポーネントに追加できる特別な属性をサポートしています。これは、 render() によって返されるコンポーネントがマークされているため、コンポーネント インスタンスを簡単に見つけることができることを意味します。これがrefの目的です。

ref の形式は次のとおりです

<input ref="myInput" />

このインスタンスにアクセスするには、this.refs を通じてアクセスできます:

this.refs.myInput

以前のバージョンでは、React.findDOMNode(this.refs.myInput) を通じてコン​​ポーネントの DOM にアクセスできました。 。しかし現在、findDOMNode 関数は廃止され、this.refs.myInput を使用して直接アクセスできるようになりました。

ref コールバック関数

ref 属性は、名前の代わりにコールバック関数にすることもできます。この関数はコンポーネントがマウントされた直後に実行されます。この参照されたコンポーネントは

関数のパラメーターとして使用されます。この関数はこのコンポーネントのパラメーターをすぐに使用することも、後で使用するために保存することもできます。 形式も比較的単純です:

render: function() {
  return <TextInput ref={(c) => this._input = c} } />;
},
componentDidMount: function() {
  this._input.focus();
},

または

render: function() {
  return (
   <TextInput
    ref={function(input) {
     if (input != null) {
      input.focus();
     }
    }} />
  );
},

ここで、参照コンポーネントがアンインストールされて参照が変更されると、前の参照のパラメータ値が null になることに注意してください。これにより、メモリ リークが効果的に防止されます。したがって、上記のコードには if 判定があります:

if(input != null){
     input.focus();
}

ref の使用シナリオとメソッドは上で紹介されています。ここで、フォーカスを取得する関数を実現するために上記の例を完成させます

var App = React.createClass({
  getInitialState: function() {
    return {userInput: ''};
  },
  handleChange: function(e) {
    this.setState({userInput: e.target.value});
  },
  clearAndFocusInput: function() {
    this.setState({userInput: ''}); // Clear the input
    // We wish to focus the <input /> now!
    if (this.refs.myTextInput !== null) {
      this.refs.myTextInput.focus();
    }
  },
  render: function() {
    return (
      <p>
        <input
          value={this.state.userInput}
          onChange={this.handleChange}
          ref=”myTextInput”   
                     />
        <input
          type="button"
          value="Reset And Focus"
          onClick={this.clearAndFocusInput}
          />
      </p>
    );
  }
});
ReactDOM.render(
  <App />,
  document.getElementById('content')
);

この例では、render 関数です。 インスタンスの説明を返します。ただし、実際のインスタンスは this.refs.myTextInput を通じて取得されます。 render によって返されるサブコンポーネントに ref="myTextInput" がある限り、this.refs.myTextInput は正しいインスタンスを取得します。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

JS によるノードへの新しい要素の追加

JSでNodelist Domリストをループする4つの方法

以上がReact コンポーネントの参照の使用方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。