Wie kann man bestimmte Reaktionselemente mithilfe von Refs direkt manipulieren?

So führen Sie eine Operation für ein bestimmtes React-Element aus

Bei der Arbeit mit DOM-Elementen in React kommt es häufig vor, dass bestimmte Elemente ausgewählt und bearbeitet werden müssen die Benutzeroberfläche manipulieren. In diesem Fall besteht das Ziel darin, eine Fortschrittsbalkenkomponente basierend auf der Auswahl eines Benutzers zu aktualisieren.

Refactor-Code zur Verwendung von Refs

Um auf DOM-Elemente in React zuzugreifen, können wir das Konzept von „ Refs.“ Refs bieten einen Mechanismus zum Erstellen eines Verweises auf ein bestimmtes Element im Komponentenbaum und ermöglichen so den direkten Zugriff auf seine Eigenschaften und Methoden.

In React 16.8 (Funktionskomponenten):

// Define the ref for the child component
const ChildRef = useRef(null);

// Forward the ref to the child component with React.forwardRef()
const Child = React.forwardRef((props, ref) => {
  // Receive and store the forwarded ref in useRef()
  ChildRef.current = ref;
  
  return <div>Child Component</div>;
});

In React 16.3 (Klasse Komponenten):

// Create a ref for the component instance
this.myRef = React.createRef();

// Pass the ref to the element within the render method
render() {
  return <div ref={this.myRef} />;
}

Zugriff auf das referenzierte Element:

Sobald eine Referenz erstellt wurde, können wir auf das DOM-Element zugreifen mit:

const element = this.myRef.current;

Vorgang für ausgewähltes Element ausführen

Mit Zugriff auf das gewünschte Element können Sie nun den erforderlichen Vorgang ausführen. In Ihrem Fall möchten Sie die Funktion „addPrecent“ ausführen, um den Prozentsatz der abgeschlossenen Fortschritte in der Fortschrittsleiste zu aktualisieren.

document.getElementById(this.state.baction).addPrecent(10);

Legacy-Methoden (nicht empfohlen)

Legacy-Methoden für den Zugriff auf DOM-Elemente umfassen die Verwendung von String-Referenzen oder Rückrufreferenzen:

String Referenzen:

<Progressbar completed={25}>

Rückruf-Referenzen:

<Progressbar completed={25}>

Von diesen Methoden wird jedoch aufgrund potenzieller Probleme abgeraten und sie werden wahrscheinlich in Zukunft entfernt React-Versionen.

Durch die Einbindung von Refs können Sie bestimmte DOM-Elemente effektiv auswählen und bearbeiten und so Ihr React verbessern Interaktivität und Flexibilität der Anwendung.

Das obige ist der detaillierte Inhalt vonWie kann man bestimmte Reaktionselemente mithilfe von Refs direkt manipulieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!