React Academy · Lektion

Props mit cloneElement klonen und injizieren

Verwenden Sie React.cloneElement, um verborgene Props vom Parent an Child-Komponenten zu übergeben.

Lektion 4 von 413 Schritte

Props mit cloneElement klonen und injizieren ist eine kostenlose React Academy-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des React Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der React Academy-Kurs umfasst insgesamt 4 Lektionen.

Willkommen

In dieser Lektion verwenden Sie React.cloneElement, um ein Child-Element zu klonen und zusätzliche Props vom übergeordneten Element einzuschleusen, ohne dass das Child davon wissen muss.

Was ist cloneElement?

`React.cloneElement(element, props, ...children)` erstellt ein neues React-Element auf Grundlage eines vorhandenen Elements und führt die neuen Props mit den ursprünglichen Props zusammen. Der Typ des ursprünglichen Elements bleibt erhalten.

const clone = React.cloneElement(child, { active: true });

Warum cloneElement verwenden?

Eine übergeordnete Komponente kann Verhalten (etwa einen aktiven Status oder Event-Handler) in ihre children einschleusen, ohne dass die children davon wissen. Das wird in Tab-Systemen, Accordions und Formulargruppen verwendet.

Beispiel für eine Tab-Leiste

Eine Tabs-Komponente kann jedes Tab-Child klonen und automatisch `isActive`- und `onClick`-Props einschleusen, sodass der Consumer sie nicht manuell verdrahten muss.

function Tabs({ children, activeIndex, onChange }) {
  return (
    <div className="tabs">
      {React.Children.map(children, (child, i) =>
        React.cloneElement(child, {
          isActive: i === activeIndex,
          onClick: () => onChange(i),
        })
      )}
    </div>
  );
}

Regeln zum Zusammenführen von Props

cloneElement führt die neuen Props **über** den ursprünglichen Props zusammen. Wenn das ursprüngliche Element bereits ein Prop mit demselben Schlüssel besitzt, gewinnt der neue Wert. style und className werden überschrieben (nicht zusammengeführt), sofern Sie dies nicht manuell erledigen.

Event-Handler zusammenführen

Um Event-Handler zusammenzuführen, anstatt sie zu überschreiben, kombinieren Sie die Callbacks manuell, bevor Sie sie an cloneElement übergeben.

React.cloneElement(child, {
  onClick: (e) => {
    child.props.onClick?.(e); // original handler
    handleClick(e);           // injected handler
  },
})

Children ersetzen

Das dritte Argument von `cloneElement` ersetzt die children des Elements. Übergeben Sie neuen Inhalt, um die ursprünglichen children vollständig zu überschreiben.

// Replace children with wrapped version
React.cloneElement(child, {}, <strong>{child.props.children}</strong>)

Elementtyp vor dem Klonen prüfen

Prüfen Sie vor dem Klonen, ob das Child ein gültiges React-Element ist, und kontrollieren Sie optional seinen Typ, um das Klonen von Nicht-Element-Children (Text, Zahlen, null) zu vermeiden.

if (React.isValidElement(child)) {
  return React.cloneElement(child, extraProps);
}
return child;

cloneElement im Vergleich zu Context

cloneElement ist fragil, da Sie die Struktur des Childs kennen müssen. Für die Weitergabe impliziter Daten über viele Ebenen wird im Allgemeinen Context bevorzugt. Verwenden Sie cloneElement nur, um Props direkt vom übergeordneten Element an das Child zu übergeben.

Moderne Alternative: Render Props und Hooks

In vielen Fällen, in denen cloneElement früher verwendet wurde, ist ein Custom Hook oder eine Render Prop sauberer. Ziehen Sie cloneElement in Betracht, wenn Sie tatsächlich sowohl das übergeordnete Element als auch die direkten children kontrollieren.

Kurzer Test

Was geschieht mit einem Prop, das sowohl im ursprünglichen Element als auch im an React.cloneElement übergebenen Props-Objekt vorhanden ist?

Beantworte es in der interaktiven Lektion

Zusammenfassung

React.cloneElement klont ein Element und schleust neue Props ein. Verwenden Sie es in Compound Components, um implizite Props vom übergeordneten Element an das Child zu übergeben. Bevorzugen Sie Context oder Render Props, wenn die Hierarchie tiefer ist.

Kurs abgeschlossen

Herzlichen Glückwunsch! Sie haben **React Children API & Slots Pattern** abgeschlossen. Sie beherrschen nun props.children, die React.Children-Hilfsfunktionen, benannte Slot-Props und cloneElement zum Erstellen flexibler Layout-Komponenten.

Kostenlos starten

Lerne React mit einem KI-Tutor — kostenlos

Schreibe und führe echten Code in deinem Browser aus, bekomme sofortige Hilfe von einem 24/7 KI-Tutor und setze dein Lernen im Web oder in der App fort.

Kurse: 88
Lektionen: 324

Kostenlos lernen Den vollständigen Kurs ansehen

Häufig gestellte Fragen

Ist die Lektion „Props mit cloneElement klonen und injizieren“ kostenlos?

Ja — der vollständige Text von „Props mit cloneElement klonen und injizieren“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des React Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der React Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Props mit cloneElement klonen und injizieren“?

Verwenden Sie React.cloneElement, um verborgene Props vom Parent an Child-Komponenten zu übergeben. Du übst React Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um React Academy zu starten?

Keine Vorkenntnisse erforderlich. React Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.

Wie lange dauert die Lektion „Props mit cloneElement klonen und injizieren“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser React Academy-Lektion Code schreiben und ausführen?

Ja. Jede React Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

Grundlagen von props.children
React.Children-Hilfsfunktionen
Benannte Slots über Objekt-Props
Props mit cloneElement klonen und injizieren

← Zurück zu React Academy