React で DOM 要素にアクセスするにはどうすればよいですか?

React で DOM 要素にアクセスする

React で DOM 要素を取得する方法

React では、DOM 要素にアクセスします。従来の JavaScript で getElementById() を使用するほど単純ではありません。 React は DOM 操作を別の方法で処理し、パフォーマンスと仮想 DOM の差分を優先します。

React Refs

React で DOM 要素にアクセスするには、refs を使用する必要があります。 Ref は、React コンポーネントによって作成された DOM 要素への参照を React が維持する方法です。 React で ref を作成するには複数の方法があります:

• String Refs (Legacy):
  React の古いバージョンでは、設定によって文字列 ref を使用して要素にアクセスできました。 ref 属性を文字列に変換します。ただし、このアプローチは推奨されず、将来のバージョンでは削除される可能性があります。

• Callback Refs:
  推奨されるアプローチは、コールバック ref を使用することです。コールバック参照を使用すると、コールバック関数を ref 属性の値として渡します。関数は DOM 要素を引数として受け取ります。

  例:

  <Progressbar completed={25}>

  ログイン後にコピー

• React.createRef (Functional Components):
  React 16.8 で導入された機能コンポーネントの場合は、React.createRef() を使用できます。これは、属性に割り当てることができる ref オブジェクトを返します。

  例:

  const myRef = React.createRef();
  
  const handleClick = () => {
    const node = myRef.current;
  }
  
  return <div ref={myRef} onClick={handleClick} />;

  ログイン後にコピー

要素へのアクセス

ref を作成したら、次のように DOM 要素にアクセスできます。以下:

• レガシー文字列参照:
  this.refs.elementName
• コールバック参照:
  this.elementName
• React.createRef:
  refObject.current

例:

const node = this.refs.Progress1;
const node = this.Progress[0];
const node = myRef.current;

特定のケースでは、コールバック参照を使用して進行状況バーにアクセスできます要素を編集し、handleClick10 関数を実行します:

handleClick10 = (e) => {
    const progressElement = this.refs[this.state.baction];
    if (progressElement) {
        progressElement.addPrecent(10);
    }
};

以上がReact で DOM 要素にアクセスするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。