Kommunikation zwischen Eltern- und Kind-Komponenten in React mit Refs

Die effiziente Verwaltung der Kommunikation zwischen Eltern- und Kindkomponenten ist entscheidend für den Aufbau gut strukturierter React-Anwendungen. Während Props die bevorzugte Methode für den größten Teil des Datenflusses sind, gibt es Situationen, in denen eine Elternkomponente eine Funktion in einem Kind direkt aufrufen muss. Dieser Artikel untersucht, wie dies mit Refs erreicht werden kann, konzentriert sich auf Best Practices und hebt die Bedeutung eines sparsamen Ref-Gebrauchs hervor.

Inhaltsverzeichnis

• Refs in React verstehen
• Aufrufen von Kindfunktionen aus Eltern-Class-Komponenten
• Aufrufen von Kindfunktionen aus Eltern-Funktionskomponenten
• Best Practices und Alternativen

Refs in React verstehen

Refs bieten eine Möglichkeit, direkt auf DOM-Elemente oder Komponenteninstanzen zuzugreifen. Sie sind nicht Teil des Datenflusses der React-Komponente und sollten sparsam verwendet werden. Obwohl sie direkten Zugriff auf Kindkomponenten bieten, kann ihre Übernutzung zu weniger wartbarem und schwerer zu testem Code führen. Priorisieren Sie die Verwendung von Props für die typische Eltern-Kind-Kommunikation, wann immer möglich.

Aufrufen von Kindfunktionen aus Eltern-Class-Komponenten

In Class-Komponenten verwenden wir React.createRef(), um ein Ref zu erstellen und es der Kindkomponente zuzuweisen. Das Elternteil greift dann auf die Instanz des Kindes zu und ruft dessen Methode auf.

// ChildComponent.js
import React from 'react';

class ChildComponent extends React.Component {
  myChildFunction = () => {
    console.log('Child function called!');
  };

  render() {
    return <button onClick={this.myChildFunction}>Klick mich</button>;
  }
}

export default ChildComponent;

// ParentComponent.js
import React from 'react';
import ChildComponent from './ChildComponent';

class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.childRef = React.createRef();
  }

  callChildFunction = () => {
    if (this.childRef.current) {
      this.childRef.current.myChildFunction();
    }
  };

  render() {
    return (
      <div>
        <button onClick={this.callChildFunction}>Kindfunktion aufrufen</button>
        <ChildComponent ref={this.childRef} />
      </div>
    );
  }
}

export default ParentComponent;

Aufrufen von Kindfunktionen aus Eltern-Funktionskomponenten

Funktionskomponenten nutzen den useRef-Hook für ähnliche Funktionalität. Der useRef-Hook gibt ein mutables Objekt zurück, dessen .current-Eigenschaft mit null initialisiert wird und über Renderings hinweg bestehen bleibt.

// ParentComponent.js
import React, { useRef } from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
  const childRef = useRef(null);

  const callChildFunction = () => {
    if (childRef.current) {
      childRef.current.myChildFunction();
    }
  };

  return (
    <div>
      <button onClick={callChildFunction}>Kindfunktion aufrufen</button>
      <ChildComponent ref={childRef} />
    </div>
  );
}

export default ParentComponent;

Best Practices und Alternativen

Obwohl Refs direkten Zugriff bieten, machen sie den Code schwerer zu testen und zu verstehen. Ziehen Sie diese Alternativen in Betracht, bevor Sie auf Refs zurückgreifen:

• Callbacks: Geben Sie eine Funktion vom Elternteil an das Kind als Prop weiter. Das Kind ruft diese Funktion bei Bedarf auf und gibt alle notwendigen Daten an das Elternteil zurück.
• State Management Bibliotheken: Bibliotheken wie Redux oder Context API bieten strukturiertere Möglichkeiten, den Datenfluss und die Komponentenkommunikation zu verwalten, wodurch Ihre Anwendung leichter zu warten und zu skalieren ist.
• Benutzerdefinierte Ereignisse: Senden Sie benutzerdefinierte Ereignisse von der Kindkomponente und lauschen Sie diesen im Elternteil.

Denken Sie daran, Refs sparsam zu verwenden. Priorisieren Sie wann immer möglich sauberere, vorhersehbarere Datenflussmechanismen.