Wie rufe ich in React eine untergeordnete Komponentenmethode von ihrem übergeordneten Element auf?

Aufrufen einer untergeordneten Komponentenmethode von ihrem übergeordneten Element in React

In React-Anwendungen ist es häufig erforderlich, in untergeordneten Komponenten definierte Methoden von dort aus aufzurufen übergeordnete Komponenten. Obwohl es verschiedene Ansätze gibt, um dies zu erreichen, konzentriert sich dieser Artikel auf eine beliebte Methode, die Refs nutzt.

Imperative Methodenbelichtung über Refs

Refs ermöglichen Entwicklern den Zugriff auf das gerenderte Elemente einer Komponente und interagieren mit ihnen. Bisher wurden Refs nur von klassenbasierten Komponenten unterstützt, aber mit der Einführung von React Hooks können sie nun auch in Funktionskomponenten verwendet werden.

Verwendung von forwardRef mit einer Funktionskomponente

Um eine Funktionskomponente über Refs zugänglich zu machen, muss sie in ForwardRef eingeschlossen werden. Dies gibt uns Zugriff auf ein Ref-Objekt, das über die Ref-Requisite zugewiesen und als zweites Argument an die Funktionskomponente übergeben werden kann.

Offenlegen der Methode mit UseImperativeHandle

Um eine Methode für eine untergeordnete Komponente verfügbar zu machen, verwenden wir den Hook useImperativeHandle. Dieser Hook benötigt zwei Argumente: ein Ref-Objekt und eine Callback-Funktion. Die Callback-Funktion gibt ein Objekt zurück, das die Komponenteninstanz erweitert. Indem wir die Methode in diesem zurückgegebenen Objekt bereitstellen, machen wir sie über die Referenz zugänglich.

Beispiel mit Codeausschnitten

Lassen Sie uns demonstrieren, wie eine untergeordnete Methode von einem übergeordneten Objekt aufgerufen wird Komponente mit refs und dem useImperativeHandle-Hook:

Child Komponente

const Child = forwardRef((props, ref) => {

  useImperativeHandle(ref, () => ({

    getAlert() {
      alert("getAlert from Child");
    }

  }));

  return <h1 id="Hi">Hi</h1>;
});

Übergeordnete Komponente

const Parent = () => {
  const childRef = useRef();

  return (
    <div>
      <child ref="{childRef}"></child>
      <button onclick="{()"> childRef.current.getAlert()}>Click</button>
    </div>
  );
};

In diesem Beispiel macht die untergeordnete Komponente die getAlert-Methode über die Referenz verfügbar, die von aufgerufen werden kann die übergeordnete Komponente durch Zugriff auf die aktuelle Eigenschaft der Referenz.

Hinweis: Es ist wichtig, sich das zu merken Von der Offenlegung imperativer Methoden für untergeordnete Komponenten wird im Allgemeinen zugunsten eines stärker datengesteuerten und deklarativen Ansatzes abgeraten. Diese Methode kann jedoch in bestimmten Szenarien nützlich sein, in denen Sie direkten Zugriff auf die Funktionalität einer untergeordneten Komponente benötigen.

Das obige ist der detaillierte Inhalt vonWie rufe ich in React eine untergeordnete Komponentenmethode von ihrem übergeordneten Element auf?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!