Wie kann ich in React auf DOM-Elemente zugreifen?

Zugriff auf DOM-Elemente in React

Wie bekomme ich DOM-Elemente in React?

In React ist der Zugriff auf DOM-Elemente nicht so einfach wie die Verwendung von getElementById() in herkömmlichem JavaScript. React handhabt DOM-Manipulationen anders und priorisiert Leistung und virtuelle DOM-Unterschiede.

React Refs

Um auf DOM-Elemente in React zuzugreifen, müssen Sie Refs verwenden. Refs sind eine Möglichkeit für React, einen Verweis auf ein DOM-Element beizubehalten, das von einer React-Komponente erstellt wurde. Es gibt mehrere Möglichkeiten, Refs in React zu erstellen:

• String Refs (Legacy):
  In älteren Versionen von React konnten Sie String Refs verwenden, um über Einstellungen auf Elemente zuzugreifen das ref-Attribut zu einer Zeichenfolge. Von diesem Ansatz wird jedoch abgeraten und er wird möglicherweise in zukünftigen Versionen entfernt.

• Callback-Referenzen:
  Ein empfohlener Ansatz ist die Verwendung von Callback-Referenzen. Bei Callback-Refs übergeben Sie eine Callback-Funktion als Wert des Ref-Attributs. Die Funktion erhält das DOM-Element als Argument.

  Beispiel:

  <Progressbar completed={25}>

• React.createRef (Funktionskomponenten):
  Für in React 16.8 eingeführte Funktionskomponenten können Sie React.createRef() verwenden. Dies gibt ein Referenzobjekt zurück, das Sie einem Attribut zuweisen können.

  Beispiel:

  const myRef = React.createRef();
  
  const handleClick = () => {
    const node = myRef.current;
  }
  
  return <div ref={myRef} onClick={handleClick} />;

Zugriff auf das Element

Sobald Sie eine Referenz erstellt haben, können Sie auf das DOM-Element zugreifen als folgt:

• Legacy String Refs:
  this.refs.elementName
• Callback Refs:
  this.elementName
• React.createRef:
  refObject.current

Zum Beispiel:

const node = this.refs.Progress1;
const node = this.Progress[0];
const node = myRef.current;

In Ihrem speziellen Fall können Sie Callback-Referenzen verwenden, um auf die Elemente der Fortschrittsleiste zuzugreifen und handleClick10 auszuführen Funktion:

handleClick10 = (e) => {
    const progressElement = this.refs[this.state.baction];
    if (progressElement) {
        progressElement.addPrecent(10);
    }
};

Das obige ist der detaillierte Inhalt vonWie kann ich in React auf DOM-Elemente zugreifen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!