`document.getElementById()` を使用せずに React で DOM 要素にアクセスするにはどうすればよいですか?

React で DOM 要素にアクセスするには? React の document.getElementById() と同等のものは何ですか?

React での DOM 要素へのアクセスは、バニラ JavaScript の従来の document.getElementById() メソッドとは異なります。 React では、DOM 要素を選択するためのいくつかの方法が提供されています。

React Refs

Ref を使用すると、React コンポーネント内で DOM 要素への参照を作成できます。この参照は、後で DOM ノードにアクセスするために使用できます。

コールバック パターン (推奨)

React 16.2 以前では、refs を使用する推奨方法はコールバック パターンを使用することです。

<progressbar completed="{25}"></progressbar>

これは、DOM ノードを引数として受け取り、それをコンポーネントの Progress 配列に割り当てるコールバック関数を作成します。 state.

String Refs

String ref はレガシーとみなされ、使用はお勧めできません。ただし、古いバージョンの React でも引き続き使用できます。

<progressbar completed="{25}"></progressbar>

DOM 要素にアクセスするには、以下を使用します。

var object = this.refs.Progress1;

文字列参照は、の将来のリリースでは削除される可能性があることに注意してください。 React.

React.createRef()

React 16.3 および後で、React.createRef() を使用して参照を作成します。

constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }
  render() {
    return <div ref="{this.myRef}"></div>;
  }

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

const node = this.myRef.current;

React Hook: useRef

In関数コンポーネント (React 16.8 で導入) では、useRef フックを使用してref.

const childRef = useRef(null);
return <div ref="{childRef}"></div>;

DOM 要素にアクセスするには、以下を使用します。

const node = childRef.current;

これらのメソッドを使用すると、React コンポーネント内の DOM 要素にアクセスして操作でき、より詳細な制御が可能になります。 Web アプリケーションのインタラクションと機能。

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