javascript / expert
Snippet
Compound Components Pattern mit Context API
Das Compound Components Pattern ermöglicht die Erstellung einer Gruppe von Komponenten, die implizit zusammenarbeiten und Status teilen. Dies verbessert die Flexibilität der API und vermeidet 'Prop Drilling', indem React Context verwendet wird, um den internen Status einer komplexen UI-Komponente wie eines Tab-Systems zu verwalten.
snippet.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
const TabsContext = React.createContext();function Tabs({ children, defaultValue }) {const [activeTab, setActiveTab] = React.useState(defaultValue);const value = React.useMemo(() => ({ activeTab, setActiveTab }), [activeTab]);return <TabsContext.Provider value={value}>{children}</TabsContext.Provider>;}Tabs.Trigger = function Trigger({ value, children }) {const { activeTab, setActiveTab } = React.useContext(TabsContext);return <button onClick={() => setActiveTab(value)} className={activeTab === value ? 'active' : ''}>{children}</button>;};Tabs.Content = function Content({ value, children }) {const { activeTab } = React.useContext(TabsContext);return activeTab === value ? <div>{children}</div> : null;};
react
Erklärung
1
const TabsContext = React.createContext();
Erstellt einen Kontext, um den gemeinsamen Status zwischen Eltern- und Kindkomponenten zu halten.
2
Tabs.Trigger = function Trigger({ value, children }) { ... }
Hängt Unterkomponenten direkt an das Hauptkomponentenobjekt an für eine saubere API mit Namensraum.