Heim > Web-Frontend > js-Tutorial > Wie kann ich untergeordnete Methoden von übergeordneten Komponenten in React aufrufen?

Wie kann ich untergeordnete Methoden von übergeordneten Komponenten in React aufrufen?

Linda Hamilton
Freigeben: 2024-12-25 13:16:10
Original
1093 Leute haben es durchsucht

How Can I Call Child Methods from Parent Components in React?

Untergeordnete Methoden von übergeordneten Komponenten aufrufen

In React ist es nicht immer notwendig, untergeordnete Methoden direkt aufzurufen. Es gibt jedoch Fälle, in denen dies erforderlich sein kann, beispielsweise wenn die untergeordnete Komponente eine zwingende Methode verfügbar macht. Dieser Artikel zeigt, wie Sie dies mithilfe von Refs erreichen, sowohl für klassenbasierte als auch für funktionale Komponenten.

Klassenbasierte Komponenten

Um eine untergeordnete Methode von einer übergeordneten klassenbasierten Komponente mithilfe von Refs aufzurufen, Befolgen Sie diese Schritte:

  1. Erstellen Sie eine Referenz in der übergeordneten Komponente mit createRef():
const childRef = React.createRef();
Nach dem Login kopieren
  1. Weisen Sie die Referenz der untergeordneten Komponente zu:
<Child ref={childRef} />
Nach dem Login kopieren
  1. Verwenden Sie die childRef, um auf die Methoden des untergeordneten Elements zuzugreifen :
childRef.current.getAlert();
Nach dem Login kopieren
Nach dem Login kopieren

Funktionskomponenten mit Hooks

Mit der Einführung von React Hooks können Sie Refs jetzt auch in Funktionskomponenten verwenden. So rufen Sie eine untergeordnete Methode von einer übergeordneten Funktionskomponente mithilfe von Referenzen auf:

  1. Verwenden Sie den Hook useRef(), um eine Referenz zu erstellen:
const childRef = useRef();
Nach dem Login kopieren
  1. Wickeln Sie die untergeordnete Komponente in „forwardRef“ ein, um auf die Referenz zuzugreifen:
const Child = forwardRef((props, ref) => {
  // ...
});
Nach dem Login kopieren
  1. Verwenden den useImperativeHandle-Hook, um die Methode des untergeordneten Elements dem übergeordneten Element zugänglich zu machen:
useImperativeHandle(ref, () => ({ getAlert() { alert('clicked'); } }));
Nach dem Login kopieren
  1. Verwenden Sie den childRef, um auf die Methoden des untergeordneten Elements zuzugreifen:
childRef.current.getAlert();
Nach dem Login kopieren
Nach dem Login kopieren

Hinweis: Es ist wichtig zu beachten, dass in React generell von der Verwendung von Refs zum Aufrufen untergeordneter Methoden abgeraten wird. Es ist besser, Daten nach unten und Ereignisse nach oben über Requisiten und Status weiterzuleiten.

Das obige ist der detaillierte Inhalt vonWie kann ich untergeordnete Methoden von übergeordneten Komponenten in React aufrufen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage