Wie greife ich in React auf DOM-Elemente zu, ohne „document.getElementById()' zu verwenden?

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

Der Zugriff auf DOM-Elemente in React unterscheidet sich von der herkömmlichen Methode document.getElementById() in Vanilla JavaScript. React bietet mehrere Ansätze zur Auswahl von DOM-Elementen.

React Refs

Refs ermöglichen es Ihnen, einen Verweis auf ein DOM-Element innerhalb einer React-Komponente zu erstellen. Diese Referenz kann später verwendet werden, um auf den DOM-Knoten zuzugreifen.

Callback-Muster (empfohlen)

In React 16.2 und früher wird die Verwendung von Refs über das Callback-Muster empfohlen:

<Progressbar completed={25}>

Dadurch wird eine Rückruffunktion erstellt, die den DOM-Knoten als Argument empfängt und ihn dem Progress-Array in der Komponente zuweist state.

String-Referenzen

String-Referenzen gelten als veraltet und werden nicht zur Verwendung empfohlen. Sie können jedoch weiterhin in älteren Versionen von React verwendet werden.

<Progressbar completed={25}>

Um auf das DOM-Element zuzugreifen, verwenden Sie:

var object = this.refs.Progress1;

Beachten Sie, dass String-Referenzen in zukünftigen Versionen von möglicherweise entfernt werden React.

React.createRef()

In React 16.3 und höher verwenden Sie React.createRef() zum Erstellen einer Referenz.

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

Um auf das DOM-Element zuzugreifen, verwenden Sie:

const node = this.myRef.current;

React Hook: useRef

In Funktionskomponenten ( eingeführt in React 16.8), verwenden Sie den useRef-Hook, um eine Referenz zu erstellen.

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

Zugriff Verwenden Sie für das DOM-Element:

const node = childRef.current;

Mit diesen Methoden können Sie auf DOM-Elemente innerhalb von React-Komponenten zugreifen und diese bearbeiten, was eine detailliertere Kontrolle über die Interaktionen und Funktionen Ihrer Webanwendung ermöglicht.

Das obige ist der detaillierte Inhalt vonWie greife ich in React auf DOM-Elemente zu, ohne „document.getElementById()' zu verwenden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!