Refs (Referenzen) in React sind ein Feature, mit welchem man auf DOM-Knoten oder React-Elemente verweisen kann. Sie können hilfreich sein, wenn man auf bestimmte Elemente zugreifen und diese manipulieren möchte, was typischerweise beim Arbeiten mit Benutzereingaben oder bei spezifischeren Anwendungsfällen wie Fokussierung oder Medienwiedergabe erforderlich ist.
Es gibt ein paar Methoden, um refs in einer React-Komponente zu erstellen:
1. Callback-Refs: Hierbei handelt es sich um eine ältere Methode, die einen bestimmten Syntaxstil verwendet, um eine ref zu erstellen und dieser dann, innerhalb eines Callbacks, eine Instanz des Elements zuzuweisen.
```jsx
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.myRef = null;
this.setMyRef = element => {
this.myRef = element;
};
}
2. React.createRef(): Dies ist die aktuell vorherrschende Methode zum Erstellen von refs. Dabei wird eine ref innerhalb des Konstruktors erstellt und kann dann mittels “this.refName.current” aufgerufen werden.
```jsx
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.myRef = React.createRef();
}
3. useRef Hook: Für Funktionskomponenten können refs mit dem Hook “useRef” erstellt werden. Dabei kann auf das ref mit “this.refName.current” zugegriffen werden.
```jsx
function MyComponent() {
const myRef = useRef(null);
In der Praxis kann man diese refs dann nutzen, um auf Eigenschaften oder Methoden des Elements zuzugreifen, zum Beispiel um ein Input-Feld zu fokussieren:
```jsx
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.myInput = React.createRef();
}
Es sollte jedoch darauf geachtet werden, dass refs in React sparsam verwendet werden sollten, da sie den normalen Datenfluss “brechen” können, was die Anwendung schwieriger zu verstehen und zu debuggen machen kann. In den meisten Fällen sollte man versuchen, Daten über props und state, statt über direkten DOM-Zgriff, zu steuern.
