Wie wähle ich ein DOM-Element in React aus? Was ist das Äquivalent von document.getElementById() in React

In React ist der direkte Zugriff auf DOM-Elemente anders als bei der Arbeit mit Vanilla-JavaScript. React verwendet ein virtuelles DOM, um das reale DOM effizient zu aktualisieren. Dies unterscheidet es von Vanilla-JavaScript.

So greifen Sie auf ein DOM-Element zu

Option 1: Refs verwenden

• Verwenden Sie Refs mit Funktionskomponenten:(v16.8.0) Verwenden Sie useRef und vorwärtsRef. Definieren Sie die Referenz mit useRef und leiten Sie sie dann mit forwardRef an das DOM-Element weiter. Um auf das Element zuzugreifen, verwenden Sie die aktuelle Eigenschaft der Referenz (ref.current).

Option 2: Verwenden von React.createRef (v16.3)

• Erstellen Sie eine Referenz mit React.createRef() und hängen Sie sie an ein Element an, um später darauf zuzugreifen. Verwenden Sie ref.current, um den DOM-Knoten abzurufen.

Option 3: Rückrufmuster verwenden (Legacy)

• Definieren Sie das Ref-Attribut im JSX Element und übergeben Sie eine Rückruffunktion, die den Verweis auf das DOM-Element empfängt.

Option 4: String verwenden Refs (Legacy)

• Verwenden Sie String-Refs, indem Sie das ref-Attribut auf einen String setzen, der das DOM-Element identifiziert. Greifen Sie mit this.refs.[stringRef] auf das Element zu.

Beispiel

Unten finden Sie ein Beispiel für die Verwendung des Rückrufmusters zur Auswahl eines DOM-Elements:

  render() {
    return (
      

        
Um auf die Elemente zuzugreifen, können Sie this.progressBars[0], this.progressBars[1] und this.progressBars[2] verwenden, um Operationen an ihnen auszuführen.