React で DOM 要素にアクセスする方法: Ref とベスト プラクティスのガイド?

React で DOM 要素にアクセスするにはどうすればよいですか? React の document.getElementById() に相当するものは何ですか

この記事では、React で DOM 要素にアクセスする方法を検討します。ユーザー インターフェイスを構築するための人気のある JavaScript ライブラリである React は、バニラ JavaScript で使用される従来の方法とは異なる DOM 管理アプローチを提供します。 React は、UI の状態を追跡する仮想 DOM を利用し、宣言的な方法で UI の更新と管理を容易にします。

では、React コンポーネント内の特定の DOM 要素にアクセスするにはどうすればよいですか? ?従来、バニラ JavaScript では、document.getElementById() などのメソッドを利用して DOM 要素をターゲットにして取得します。 React では、これを実現するためのアプローチがいくつかあり、さまざまな React バージョンで時間の経過とともに進化してきました。

文字列参照の使用 (非推奨):

古いバージョンの React では、文字列参照はDOM 要素にアクセスするためによく使用されます。その仕組みは次のとおりです。

<Progressbar completed={25}>

この例では、値「Progress1」を持つ ref 属性が Progressbar コンポーネントにアタッチされています。 DOM 要素にアクセスするには、

var object = this.refs.Progress1;

を使用できます。ただし、このメソッドはレガシーとみなされ、将来の React リリースでは削除される可能性があります。 Facebook は、潜在的な問題があるため、文字列参照を使用しないことを推奨し、代替メソッドの使用を推奨しています。

コールバック パターンの使用 (React 16.2 以前に推奨):

React 16.2 およびそれ以前に推奨されるアプローチ以前は、コンポーネントのレンダリング内で DOM 要素に直接アクセスできるようにするコールバック パターンを使用する方法です。 method:

<Progressbar completed={25}>

この例では、ref 属性は、DOM 要素を引数として受け取るアロー関数として定義されています (この場合は input)そしてそれをコンポーネント内の配列に割り当てます。これにより、コンポーネント内の DOM 要素に直接アクセスできるようになります。

React.createRef() の使用 (React 16.3 ):

React 16.3 以降のバージョンでは、React.createRef( ) は参照を作成するために使用されます。通常は、作成した ref をコンストラクター内のインスタンス変数に割り当てます。

constructor(props) {
  super(props);
  this.myRef = React.createRef();
}

DOM 要素にアクセスするには、次を使用できます。

const node = this.myRef.current;

DOM 要素にアクセスするには、このメソッドが推奨されます。 React ではベスト プラクティスと考えられています。

React.forwardRef() と useRef() の使用 (React 16.8 ):

React 16.8 で導入された機能コンポーネントでは、React.forwardRef を useRef とともに使用して、ref を作成し、DOM 要素にアクセスできます。 React.forwardRef は参照を DOM 要素に転送するために使用され、useRef は参照を作成するために使用されます。

const Child = React.forwardRef((props, ref) => {
  return <div ref={ref}>Child</div>;
});

const App = () => {
  const childRef = useRef(null);
  return <Child ref={childRef} />;
};

DOM 要素にアクセスするには、次を使用できます:

<Progressbar completed={25}>

注: 文字列参照は推奨されないため、上記の推奨方法のいずれかを使用することをお勧めします。 React には DOM 要素にアクセスするためのさまざまなオプションがあり、選択は使用している React のバージョンによって異なります。

以上がReact で DOM 要素にアクセスする方法: Ref とベスト プラクティスのガイド?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。