Rufen Sie die untergeordnete Funktion von der übergeordneten Komponente in React auf

1. Einführung in ref in React
2. Verwenden Sie ref, um die untergeordnete Funktion vom übergeordneten Element in den Klassenkomponenten aufzurufen
3. Verwenden Sie Hooks, um eine untergeordnete Funktion von einem übergeordneten Element in funktionalen Komponenten aufzurufen

In diesem Artikel lernen wir, die Methode der untergeordneten Komponente für die übergeordnete Komponente in React aufzurufen.

Meistens müssen Entwickler die Methode der übergeordneten Komponente von der untergeordneten Komponente aufrufen, und wir können dies erreichen, indem wir die Methode der übergeordneten Komponente als props an die untergeordnete Komponente übergeben.

Wir können es auch umkehren. Und hier werden wir refs verwenden, um die Methode der untergeordneten Komponente von der übergeordneten Komponente aufzurufen.

Einführung in ref in React

Im Allgemeinen können wir mit der untergeordneten Komponente von der übergeordneten Komponente interagieren, indem wir die Requisiten an die untergeordnete Komponente übergeben. Das ref ermöglicht es uns, mit der Komponente außerhalb des typischen Eltern-Kind-Datenflusses zu interagieren.

Benutzer können der folgenden Syntax folgen, um die ref zu erstellen.

this.newRef = React.createRef();

Nach dem Erstellen des ref können Benutzer es als Wert des ref-Attributs eines beliebigen HTML-Elements oder einer beliebigen HTML-Komponente zuweisen. Wir wollen es dem Attribut ref der Child-Komponente zuweisen.

<Child ref={this.newRef} />

Jetzt können Benutzer über das Attribut current der newRef auf die gemountete Instanz der untergeordneten Komponente zugreifen und die Methoden der untergeordneten Komponente aufrufen.

this.childRef.current.childMethod();

Auf diese Weise ist ref nützlich, um mit jeder Komponente außerhalb des typischen Datenflusses zu interagieren.

Verwenden Sie ref, um die untergeordnete Funktion vom übergeordneten Element in den Klassenkomponenten aufzurufen

Im folgenden Beispiel haben wir zwei Komponenten erstellt, die App (Elternteil) und das Kind. In der Child-Komponente haben wir etwas HTML zum Rendern und childMethod() hinzugefügt, das beim Aufrufen ein Warnfeld anzeigt.

In der App-Komponente haben wir die ref im Konstruktor erzeugt und deren Wert dem ref-Attribut der Child-Komponente zugewiesen.

Wenn ein Benutzer auf die Schaltfläche Klicken klickt, wird die Methode callChild() aufgerufen. Die Methode callChild() greift auf die Methode childMethod() zu und ruft sie über das Attribut current von ref auf.

Beispielcode:

//  import required libraries
import React from "react";
import Child from "./Child";

export default class APP extends React.Component {
  constructor(props) {
    super(props);
    // Initializing the Refs
    this.childRef = React.createRef();
  }
  //  call the child method
  callChild = () => {
    this.childRef.current.childMethod();
  };

  render() {
    return (
      <div>
        {/* Passing Ref to CHild component */}
        <Child ref={this.childRef} />
        <button onClick={this.callChild}>Click</button>
      </div>
    );
  }
}

import React from "react";
export default class Child extends React.Component {
    childMethod() {
        alert('Called the Method of Child.');
    }
    render() {
        return <h1>This is From Child Component.</h1>;
    }
}

Ausgang:

Verwenden Sie Hooks, um eine untergeordnete Funktion von einem übergeordneten Element in funktionalen Komponenten aufzurufen

Im folgenden Beispiel haben wir die beiden Funktionskomponenten App und Child erstellt. Wir haben die Child-Komponente in die forwardRef-Hooks eingeschlossen, um mit dem useRef-Hook auf die Child-Komponente innerhalb der übergeordneten Komponente zuzugreifen.

Außerdem haben wir das useImperativeHandle verwendet und als ersten Parameter die ref und als zweiten Parameter eine Callback-Funktion übergeben. Hier erweitert die Child-Komponente die zurückgegebene Callback-Funktion.

Auf den zurückgegebenen Wert der Callback-Funktion in der Elternkomponente können wir über das Attribut current des Hooks useRef zugreifen.

Beispielcode - (App.js):

//  import required libraries
import React, { useRef } from "react";
import Child from "./Child";

export default function APP() {
  // use hooks to create `ref`
  const childRef = useRef();
  // call child method
  const onClick = () => {
    childRef.current.childMethod();
  };
  return (
    <div>
      {/* Passing Ref to CHild component */}
      {/* use `refs` */}
      <Child ref={childRef} />
      <button onClick={onClick}>Click</button>
    </div>
  );
}

Beispielcode - (Child.js):

import React, { forwardRef, useImperativeHandle } from "react";
// While using the hooks, it is required to wrap the component inside the forwardRef to gain access to the ref object,
//, which we create using the `useref` hooks inside the parent component.
const Child = forwardRef((props, ref) => {
  // Extending the child component with the return value of the callback function passed as a second parameter of the useImperatuveHandle.
  useImperativeHandle(ref, () => ({
    childMethod() {
      alert("Called the Method of Child.");
    },
  }));

  return <h1>Use Refs in functional component.</h1>;
});
export default Child;

Ausgang:

Wir haben gelernt, die Child-Funktion von der Parent-Funktion mit ref aufzurufen. Außerdem können Benutzer Änderungen an der untergeordneten Komponente über die übergeordnete Komponente mit dem ref vornehmen.