WrapperKomponenten

WrapperKomponenten sind Komponenten, die andere Komponenten oder Inhalte umschließen, um Struktur, Stil oder Verhalten bereitzustellen, ohne die zugrunde liegende Daten- oder Anwendungslogik der enthaltenen Elemente grundlegend zu verändern. Sie dienen der Organisation von UI-Elementen und der wiederverwendbaren Anwendung von Layout- oder Funktionsmerkmalen.

Sie unterscheiden sich von Higher-Order Components (HOCs) dadurch, dass WrapperKomponenten echte, rendernde Komponenten sind, die ihre Kinder direkt ausgeben. Sie können Children durchreichen, Kontext bereitstellen oder zusätzliche DOM-Strukturen um die enthaltenen Elemente herum hinzufügen. In vielen Frameworks kommen WrapperKomponenten als Container oder Layout-Wrapper zum Einsatz und nutzen Techniken wie Fragments, um unnötige DOM-Knoten zu vermeiden.

Typische Anwendungen umfassen Layout-Wrapper, die konsistente Ränder, Abstände oder Grid-Strukturen sicherstellen, Theme-Wrapper, die Kontexte wie Farben oder Schriftarten bereitstellen, sowie Wrapper, die Zugänglichkeits- oder Logging-Funktionen um ihre Kinder herum implementieren. WrapperKomponenten können auch zustandsbezogene Funktionalität kapseln, etwa State- oder Event-Handling, ohne die inneren Komponenten zu verändern.

Ein einfaches Beispiel ist ein CardWrapper, der seine Kinder in eine div mit der Klasse card einbettet und so ein einheitliches Erscheinungsbild ermöglicht. Ein ThemeWrapper könnte ThemeContext.Provider nutzen, um dem gesamten Baumschnitt ein Farbschema zu geben, ohne dass einzelne Komponenten davon Kenntnis nehmen.

Vorteile sind bessere Wiederverwendbarkeit, konsistente Struktur und klare Trennung von Layout und Inhaltslogik. Nachteile können zusätzliche DOM-Knoten oder Prop-Drilling sein, weshalb Wrapper gering gehalten und mit Fragmenten oder sinnvollen Prop-Pfaden eingesetzt werden sollten. See also: Higher-Order Components, Render Props, Slots, Context.