javascript / expert
Snippet
Named Slots Muster durch Children Mapping
Das 'Named Slots'-Muster nutzt Reacts Children-API, um spezifische Unterkomponenten zu extrahieren. Dies ermöglicht es dem Konsumenten, Inhalte in beliebiger Reihenfolge zu definieren, während die Elternkomponente die finale Layoutstruktur und das Styling kontrolliert.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import React, { Children } from 'react';const Card = ({ children }) => {const header = Children.toArray(children).find((child) => child.type === Card.Header);const body = Children.toArray(children).find((child) => child.type === Card.Body);return (<div className="card"><div className="card-header">{header}</div><div className="card-body">{body}</div></div>);};Card.Header = ({ children }) => <>{children}</>;Card.Body = ({ children }) => <>{children}</>;
react
Erklärung
1
Children.toArray(children).find(...)
Sucht nach einem bestimmten Komponententyp innerhalb der übergebenen Kinder, um ihn im vorgesehenen 'Slot' zu platzieren.
2
child.type === Card.Header
Verwendet die Komponentenreferenz als eindeutigen Bezeichner zur Identifizierung von Unterteilen.
3
Card.Header = ({ children }) => ...
Statische Eigenschaften der Komponentenfunktion dienen als semantische Marker für Layout-Fragmente.