javascript / intermediate
Snippet
Compound-Component-Muster mit Context
Das Compound-Component-Muster ermöglicht eine ausdrucksstärkere API, indem der Zustand implizit zwischen einem Eltern-Element und seinen Kindern geteilt wird. Dies ist ideal für UI-Komponenten wie Tabs, Selects oder Akkordeons.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const TabsContext = createContext({ activeTab: '', setActiveTab: (id: string) => {} });export function Tabs({ children, defaultTab }: { children: ReactNode, defaultTab: string }) {const [activeTab, setActiveTab] = useState(defaultTab);return (<TabsContext.Provider value={{ activeTab, setActiveTab }}><div className="tabs-container">{children}</div></TabsContext.Provider>);}Tabs.Tab = function Tab({ id, children }: { id: string, children: ReactNode }) {const { activeTab, setActiveTab } = useContext(TabsContext);return <button onClick={() => setActiveTab(id)} className={activeTab === id ? 'active' : ''}>{children}</button>;};
nextjs
Erklärung
1
const TabsContext = createContext(...);
Erstellt einen gemeinsamen Zustandscontainer für die Komponentengruppe.
2
Tabs.Tab = function Tab(...) { ... }
Hängt Unterkomponenten direkt an die Hauptkomponente an für eine sauberere API.
3
const { activeTab, setActiveTab } = useContext(TabsContext);
Nutzt den geteilten Zustand innerhalb der Kind-Komponente.