So wählen Sie DOM-Elemente in React aus: Alternativen zu „document.getElementById()'?

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

• Referenzen mit Funktionskomponenten verwenden:(v16.8.0)Verwenden useRef und forwardRef. 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 mit React.createRef() eine Referenz 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 Callback-Funktion, die den Verweis auf das DOM-Element empfängt.

Option 4: Verwenden von String-Referenzen (Legacy)

• Verwenden Sie String-Refs, indem Sie das ref-Attribut auf eine Zeichenfolge festlegen, die 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 Callback-Musters zur Auswahl eines DOM-Elements:

  render() {
    return (
      <div>
        <Progressbar
          completed={25}
         >

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

Das obige ist der detaillierte Inhalt vonSo wählen Sie DOM-Elemente in React aus: Alternativen zu „document.getElementById()'?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!