ReactでのDOM操作の実装

前の単語

場合によっては、通常のデータフローの外部で子に対する変更を強制する必要があります。変更する子は、React コンポーネントインスタンスまたは DOM 要素にすることができます。現時点では、DOMを操作するためにrefが使用されています

使用シナリオ

ref が適している状況をいくつか示します。

1. フォーカス、テキスト選択、メディアコントロールを処理する

2. 強制アニメーションをトリガーする

3. サードパーティのDOMライブラリを統合する

宣言的に実行できる場合は、ref の使用を避けてください。

[注意] open() メソッドと close() メソッドを Dialog コンポーネントに直接公開しないでください。isOpen プロパティを渡す方が適切です。

参照

React は、任意のコンポーネントに特別な属性を追加することをサポートしています。 ref 属性は、コンポーネントがマウントまたはアンマウントされたときにすぐに実行されるコールバック関数を受け入れます。

[注意] コンポーネントがマウントされた後にrefを取得します。これはcomponentWillMountや最初のレンダリングでは取得できませんが、componentDidMountでは取得できます。

HTML要素

HTML 要素に ref 属性を追加すると、ref コールバックは基になる DOM 要素をパラメーターとして受け取ります。

React コンポーネントは、ロード時に DOM 要素を ref コールバック関数に渡し、アンロード時に null を渡します。 ref コールバックは、componentDidMount または componentDidUpdate ライフサイクルコールバックの前に実行されます。

クラスCustomTextInputはReact.Componentを拡張します。
  コンストラクタ(props) {
    スーパー(小道具);
    this.focus = this.focus.bind(this);
  }
  集中（） {
    テキスト入力にフォーカスを当てます。
  }
  与える（） {
    戻る （
      <div>
        <入力
          タイプ="テキスト"
          ref={(入力) => { this.textInput = input; }} />
        <入力
          タイプ = "ボタン"
          value="テキスト入力にフォーカスする"
          onClick={this.focus}
        />
      </div>
    );
  }
}

短く書くと次のようになります

ref={input => this.textInput = 入力}

クラスコンポーネント

クラスを使用して宣言されたカスタムコンポーネントに ref 属性を使用すると、ref コールバックは読み込まれた React インスタンスを受け取ります。

クラスAutoFocusTextInputはReact.Componentを拡張します{
  コンポーネントマウント() {
    テキスト入力にフォーカスを当てる
  }

  与える（） {
    戻る （
      <カスタムテキスト入力
        ref={(入力) => { this.textInput = input; }} />
    );
  }
}

[注意] このメソッドはクラスで宣言されたCustomTextInputに対してのみ有効です

機能コンポーネント

関数コンポーネントにはインスタンスがないため、ref 属性は使用できません。

[DOMノードを親コンポーネントに公開する]

子ノードに特別な属性を公開します。子ノードは function 属性を取得し、それが DOM ノードに ref 属性として添付されます。これにより、親はミドルウェアを介して子のDOMノードに参照を渡すことができる。

この方法は、クラスコンポーネントと機能コンポーネントの両方に適用できます。

関数 CustomTextInput(props) {
  戻る （
    <div>
      <入力ref={props.inputRef} />
    </div>
  );
}

クラス Parent は React.Component を拡張します {
  与える（） {
    戻る （
      <カスタムテキスト入力
        inputRef={el => this.inputElement = el}
      />
    );
  }
}

上記の例では、Parent は ref コールバックを特別な inputRef として CustomTextInput に渡し、CustomTextInput はそれを ref 属性を介して <input> に渡します。最後に、Parentのthis.inputElementは、CustomTextInputの<input>要素に対応するDOMノードに設定されます。

制御されていないコンポーネント

制御されていないコンポーネントを書くには、状態の更新ごとにイベントハンドラを書く代わりに、refを使用してDOMからフォームの値を取得できます。

[注意] reactをバインドせずにe.target.valueを介してDOM値を取得できます

クラスNameFormはReact.Componentを拡張します{
  コンストラクタ(props) {
    スーパー(小道具);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  ハンドル送信(イベント) {
    alert('名前が送信されました: ' + this.input.value);
    イベントをデフォルトにしない();
  }

  与える（） {
    戻る （
      <フォームonSubmit={this.handleSubmit}>
        <ラベル>
          名前：
          <input type="text" ref={(input) => this.input = input} />
        </ラベル>
        <input type="submit" value="送信" />
      </フォーム>
    );
  }
}

非制御コンポーネントは実際のデータを DOM に保存するため、非制御コンポーネントを使用すると、React コードと非 React コードを同時に統合しやすくなります。

【デフォルト値】

React ライフサイクル中、フォーム要素の value 属性は DOM 内の値をオーバーライドします。制御されていないコンポーネントを使用する場合、通常は React で初期値を割り当てますが、それ以降の更新は制御しないようにします。この問題を解決するには、値の代わりに defaultValue 属性を指定します。

与える（） {
  戻る （
    <フォームonSubmit={this.handleSubmit}>
      <ラベル>
        名前：
        <入力
          デフォルト値="ボブ"
          タイプ="テキスト"
          ref={(入力) => this.input = 入力} />
      </ラベル>
      <input type="submit" value="送信" />
    </フォーム>
  );
}

同様に、<input type="checkbox">と<input type="radio">はdefaultCheckedをサポートし、<select>と<textarea>はdefaultValueをサポートします。

リアクトDOM

react-dom パッケージは、アプリケーションのトップレベルのスコープから呼び出すことができる DOM のメソッドを提供し、必要に応じて React モデル外部の終了ポイントとして使用することもできます。しかし、ほとんどのコンポーネントはこのパッケージを使用する必要はありません

与える（）
コンポーネントをアンマウントする()
DOMNode を見つける()

【与える（）】

ReactDOM.render() は、
  要素、
  容器、
  [折り返し電話]
）

指定されたコンテナー内の DOM 要素に追加された React 要素をレンダリングし、コンポーネントへの参照 (ステートレスコンポーネントの場合は null) を返します。

React 要素が以前にコンテナーにレンダリングされている場合、このコードは更新を実行し、要素の最新の状態を反映するために必要な DOM 要素のみを変更します。

【コンポーネントノードのアンマウント()】

ReactDOM.unmountComponentAtNode(コンテナ)
マウントされた React コンポーネントを DOM 要素から削除し、そのイベントハンドラーと状態をクリアします。コンテナにコンポーネントがマウントされていない場合、この関数は何も実行しません。コンポーネントがアンインストールされている場合は true を返し、アンインストールできるコンポーネントがない場合は false を返します。

[DOMNode() を検索]

ReactDOM.findDOMNode(コンポーネント)
このコンポーネントが DOM にマウントされている場合、関数はブラウザで生成された対応する DOM 要素を返します。この関数は、フォームの値など、DOM から値を読み取ったり、DOM 要素のサイズを計算したりする必要がある場合に非常に便利です。ほとんどの場合、DOM ノードへの参照を追加して、findDOMNode 関数の使用を完全に回避できます。レンダリングがnullまたはfalseを返す場合、findDOMNodeもnullを返します。

新しい参照

バージョン 16.3 より前の React では、ref を提供する方法が文字列とコールバックの 2 つありました。文字列メソッドにはいくつか問題があるため、公式の推奨では ref を使用するにはコールバックを使用します。今回導入されたcreateRef APIは、refを使用するための欠陥のない方法であると公式に言われており、コールバックメソッドも道を譲ることができる。

クラスMyComponentはReact.Componentを拡張します。
  コンストラクタ(props) {
    スーパー(小道具);
    this.myRef = React.createRef();
  }
  与える（） {
    <div ref={this.myRef} /> を返します。
  }
}

次に、現在の属性を使用して現在の要素を取得します。

this.myRef.current

典型的なアプリケーションを以下に示します。

  コンストラクタ(props){
    スーパー(小道具)
    this.Mask = React.createRef()
    this.MenuList = React.createRef()
  }
  ハンドルクリック = () => {
    ReactDOM.findDOMNode(this.MenuList.current).classList.toggle('transform-zero')
    ReactDOM.findDOMNode(this.Mask.current).classList.toggle('mask-show')
  }

[注] styledComponentsでスタイル設定された要素によって公開されるインターフェースは、refではなくinnerRefです。

<ラップ innerRef={this.itemRef}>

これで、React での DOM 操作の実装に関するこの記事は終了です。React の DOM 操作に関するより詳しい情報は、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: