DOM-Elemente in React auswählen

Jeder JavaScript-Entwickler hat schon einmal die Methode getElementById() verwendet. Es nimmt ein Argument id und gibt ein HTML-Element mit dieser ID zurück. Diese Methode ist äußerst nützlich, um manuelle DOM-Mutationen durchzuführen.

Das Greifen eines HTML-Elementknotens ist eine häufige Notwendigkeit. Viele Entwickler, die Erfahrung mit JavaScript haben, aber neu im React-Framework sind, möchten wissen, wie diese Operation in React ausgeführt wird.

Refs in React

Refs, kurz für Referenzen, sind eine einfache Möglichkeit, auf das DOM in React zuzugreifen. Um das Element (oder die Komponente) mit einer Referenz zu verknüpfen, muss das Element ein ref-Attribut haben, das Ihrer Referenz entspricht. Ein Beispielelement <div> kann wie folgt mit testRef verknüpft werden: <div ref={this.testRef}></div>. Es empfiehlt sich, ref-Instanzen in einer Variablen zu speichern.

in Funktionskomponenten

Seit der Einführung von Haken vor etwa zwei Jahren sind Funktionskomponenten deutlich robuster geworden. Wenn Sie eine moderne Version von React verwenden (z. B. 16.8.0), können Sie den Hook useRef() importieren, mit dem eine Referenz definiert werden kann. Hier ist ein Beispiel für eine Funktionskomponente, die während des Renderns auf eine Zufallsvariable verweist:

function App() {
    const elementVariable = useRef(null)
    useEffect(() => console.log(elementVariable), [] )
    return (
        <div ref={elementVariable}>
           <h1></h1> 
        </div>
    )
}

In diesem Beispiel speichern wir den HTML-Knoten in der Variablen, indem wir elementVariable gleich der Instanz des Hooks useRef() setzen.

Hook funktioniert nur, wenn das HTML-Element ein ref-Attribut auf den Variablennamen gesetzt hat.

Ein an den Hook useRef() übergebenes Argument gibt den Anfangswert der ref-Instanz an. Sobald das Element <div></div> gemountet wurde, enthält die Variable den HTML-Knotenwert. So sieht die Konsole aus:

in Klassenkomponenten

Lange Zeit war die Verwendung von Klassenkomponenten die Standardmethode zum Erstellen interaktiver React-Komponenten.

Seit der Veröffentlichung der Version 16.3 können React-Entwickler mit React.createRef() eine Referenz erstellen. Die API mag unterschiedlich sein, aber beide Hooks React.createRef() und useRef() erzeugen im Wesentlichen die gleichen Ref-Instanzen.

In Klassenkomponenten wird die ref-Instanz in einer Klasseneigenschaft gespeichert. Hier ist ein Beispiel:

class App extends Component {
  constructor(props){
    super(props)
    this.ref = React.createRef()
  }
  componentDidMount(){
    console.log(this.ref);
  }
  render() {
    return <h1 ref={this.ref}>Referenced Text</h1>;
  }
}

Wenn Sie sich die Konsole ansehen, sehen Sie ein Objekt mit der Eigenschaft current, das den HTML-Knoten enthält.

Entwickler, die React Version >16.3 verwenden, müssen eine etwas andere Syntax verwenden, um Refs zu erstellen. Beispiel:

<div ref={(element) => this.ref = element}></div>

Die so erstellte Referenz wird Callback ref genannt, weil wir das Attribut ref auf eine Callback-Funktion setzen, die das HTML-Element als Argument nimmt und diesen Wert der Eigenschaft ref der Klasseninstanz zuweist.