Wie greife ich in React auf DOM-Elemente zu: Ein Leitfaden für Refs und Best Practices?

Wie greife ich auf ein DOM-Element in React zu? Was ist das Äquivalent von document.getElementById() in React?

In diesem Artikel werden wir die Methoden für den Zugriff auf DOM-Elemente in React untersuchen. React, eine beliebte JavaScript-Bibliothek zum Erstellen von Benutzeroberflächen, bietet einen anderen Ansatz zur DOM-Verwaltung als herkömmliche Methoden, die in Vanilla-JavaScript verwendet werden. React nutzt ein virtuelles DOM, das den Status der Benutzeroberfläche verfolgt und so die deklarative Aktualisierung und Verwaltung der Benutzeroberfläche erleichtert.

Wie können wir also auf ein bestimmtes DOM-Element innerhalb einer React-Komponente zugreifen? ? Traditionell verlassen wir uns in Vanilla-JavaScript auf Methoden wie document.getElementById(), um DOM-Elemente anzusprechen und abzurufen. In React gibt es mehrere Ansätze, um dies zu erreichen, und sie haben sich im Laufe der Zeit mit verschiedenen React-Versionen weiterentwickelt.

Verwendung von String-Referenzen (veraltet):

In älteren Versionen von React waren String-Referenzen Wird häufig für den Zugriff auf DOM-Elemente verwendet. So funktioniert es:

<Progressbar completed={25}>

In diesem Beispiel wird das Attribut ref mit dem Wert „Progress1“ an die Progressbar-Komponente angehängt. Um auf das DOM-Element zuzugreifen, können Sie Folgendes verwenden:

var object = this.refs.Progress1;

Diese Methode gilt jedoch als veraltet und wird wahrscheinlich in zukünftigen React-Versionen entfernt. Facebook rät aufgrund möglicher Probleme von der Verwendung von String-Referenzen ab und empfiehlt die Verwendung alternativer Methoden.

Verwendung des Callback-Musters (empfohlen für React 16.2 und früher):

Ein empfohlener Ansatz für React 16.2 und Früher wurde das Rückrufmuster verwendet, das den Zugriff auf das DOM-Element direkt im Render der Komponente ermöglicht Methode:

<Progressbar completed={25}>

In diesem Beispiel ist das Attribut ref als Pfeilfunktion definiert, die das DOM-Element als Argument empfängt (in diesem Fall Eingabe) und weist es einem Array in der Komponente zu. Dies ermöglicht den direkten Zugriff auf das DOM-Element innerhalb der Komponente.

Verwendung von React.createRef() (React 16.3):

In React 16.3 und späteren Versionen React.createRef( ) wird zum Erstellen einer Referenz verwendet. Normalerweise weisen Sie die erstellte Referenz einer Instanzvariablen im Konstruktor zu:

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

Um auf das DOM-Element zuzugreifen, können Sie Folgendes verwenden:

const node = this.myRef.current;

Diese Methode wird für den Zugriff auf DOM-Elemente empfohlen in React und gilt als Best Practice.

Die Verwendung von React.forwardRef() und useRef() (React 16.8 ):

In Funktionskomponenten, die in React 16.8 eingeführt wurden, können Sie React.forwardRef mit useRef verwenden, um Refs zu erstellen und auf DOM-Elemente zuzugreifen. React.forwardRef wird verwendet, um die Referenz an das DOM-Element weiterzuleiten, und useRef wird verwendet, um die Referenz zu erstellen:

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

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

Um auf das DOM-Element zuzugreifen, Sie können Folgendes verwenden:

<Progressbar completed={25}>

Hinweis: Von String-Referenzen wird abgeraten, daher wird die Verwendung einer der oben empfohlenen Methoden bevorzugt. React bietet verschiedene Optionen für den Zugriff auf DOM-Elemente. Die Auswahl hängt von der von Ihnen verwendeten React-Version ab.

Das obige ist der detaillierte Inhalt vonWie greife ich in React auf DOM-Elemente zu: Ein Leitfaden für Refs und Best Practices?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!