javascript / intermediate
Snippet
Compound Components Pattern
Das Compound Components Pattern ermöglicht es einer Elternkomponente, den Status mithilfe von Context implizit mit ihren Kindern zu teilen. Dies macht die API für den Benutzer flexibler und sauberer, da Props nicht manuell an jedes Kind übergeben werden müssen.
snippet.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
const TabsContext = React.createContext();function Tabs({ children }) {const [active, setActive] = React.useState(0);return (<TabsContext.Provider value={{ active, setActive }}>{children}</TabsContext.Provider>);}Tabs.Tab = ({ index, children }) => {const { active, setActive } = React.useContext(TabsContext);return (<buttononClick={() => setActive(index)}style={{ fontWeight: active === index ? 'bold' : 'normal' }}>{children}</button>);};
react
Erklärung
1
const TabsContext = React.createContext();
Erstellt ein Kontext-Objekt, um den geteilten Status zwischen Eltern- und Kindkomponenten zu speichern.
2
Tabs.Tab = ({ index, children }) => { ... }
Hängt die Unterkomponente zur besseren Organisation direkt an das Hauptkomponenten-Objekt an.
3
const { active, setActive } = React.useContext(TabsContext);
Nutzt den geteilten Status des Elternteils, ohne Props durch mehrere Ebenen reichen zu müssen.