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

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();

2. Weisen Sie die Referenz der untergeordneten Komponente zu:

<Child ref={childRef} />

3. Verwenden Sie die childRef, um auf die Methoden des untergeordneten Elements zuzugreifen :

childRef.current.getAlert();

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();

2. Wickeln Sie die untergeordnete Komponente in „forwardRef“ ein, um auf die Referenz zuzugreifen:

const Child = forwardRef((props, ref) => {
  // ...
});

3. Verwenden den useImperativeHandle-Hook, um die Methode des untergeordneten Elements dem übergeordneten Element zugänglich zu machen:

useImperativeHandle(ref, () => ({ getAlert() { alert('clicked'); } }));

4. Verwenden Sie den childRef, um auf die Methoden des untergeordneten Elements zuzugreifen:

childRef.current.getAlert();

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!