ホームページ > 記事 > バックエンド開発 > React コンポーネントの参照の使用例を共有する

React コンポーネントの参照の使用例を共有する

小云云オリジナル: 2018-02-11 09:10:041723ブラウズ

ref 名前が示すように、実際にはコンポーネントへの参照として見ることができ、またロゴであるとも言えます。コンポーネント属性として、その属性値は文字列または関数にすることができます。この記事では主に React コンポーネント ref の詳細な使い方を紹介します。編集者はこれが非常に優れていると考えたので、ここで共有して参考にします。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。

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

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

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

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

上の例では、ボタンのクリックを実装して、input 要素に値を空の文字列に設定するように通知しましたが、フォーカスを取得する input 要素はまだ実装していません。 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: &#39;&#39;};
  },
  handleChange: function(e) {
    this.setState({userInput: e.target.value});
  },
  clearAndFocusInput: function() {
    this.setState({userInput: &#39;&#39;}); // 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(&#39;content&#39;)
);

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

React コンポーネントの参照の使用例を共有する

関連記事