Erstellung eines Refs in einer Klassenkomponente in React mittels React.createRef()

In älteren Klassenkomponenten von React kann man mithilfe der Methode React.createRef() eine Referenz (Ref) erstellen. Ein Ref ist grundsätzlich ein Weg, auf DOM-Elemente (Dokumentenobjektmodelle) oder Klassenkomponenten innerhalb einer bestimmten Komponente direkt zuzugreifen.

Die React.createRef() Methode wird genutzt, um eine Ref zu einem Element zu erstellen. Dies ist besonders nützlich, wenn man direkte Manipulationen eines DOM Elements oder das Abrufen von Daten aus einem komplexen Objekt (wie z.B. Video- und Audiodaten) benötigt.

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

In dem obigen Beispiel wird eine Ref mit Bezeichnung myRef in der constructor Methode erstellt und anschließend dieser Ref dem div Element im render Methode zugewiesen. Nun kann innerhalb der Klasse mit this.myRef.current auf das div Element direkt zugegriffen werden.

Es ist jedoch zu beachten, dass die Refs eine Lösung für fortgeschrittene Funktionen sind und eigentlich im Normalfall und in den meisten Fällen vermieden werden sollten. Sie können die Wartung der Komponenten erschweren und sollten daher mit Vorsicht verwendet werden. Versuche immer, Situationen zu vermeiden, die eine direkte Manipulation des DOM erfordern. Stattdessen sollten in den meisten Fällen die Daten und der Zustand deiner Komponenten zur Steuerung der Benutzeroberfläche verwendet werden.