javascript / intermediate
Snippet
State-Sharing mit der Context API
Die Context API bietet eine Möglichkeit, Daten durch den Komponentenbaum zu leiten, ohne Props manuell über jede Ebene weitergeben zu müssen (Prop-Drilling).
snippet.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
const ThemeContext = React.createContext('light');function App() {return (<ThemeContext.Provider value="dark"><Layout /></ThemeContext.Provider>);}function Layout() {const theme = React.useContext(ThemeContext);return <div className={`theme-${theme}`}>The current theme is {theme}</div>;}
react
Erklärung
1
React.createContext('light')
Initialisiert ein Context-Objekt mit einem Standardwert von 'light'.
2
ThemeContext.Provider value="dark"
Stellt allen Nachkommen im Komponentenbaum den Wert 'dark' zur Verfügung.
3
React.useContext(ThemeContext)
Konsumiert den aktuellen Wert des nächstgelegenen passenden Providers im Baum.