0 Tage Serie
javascript / intermediate
Snippet

Globaler Statuszugriff mit der Context API

Context bietet eine Möglichkeit, Daten durch den Komponentenbaum zu leiten, ohne Props manuell auf jeder Ebene weitergeben zu müssen.

snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
const ThemeContext = React.createContext('light');
const Display = () => {
const theme = useContext(ThemeContext);
return <div className={theme}>Current theme: {theme}</div>;
};
const App = () => (
<ThemeContext.Provider value="dark">
<Display />
</ThemeContext.Provider>
);
react
Erklärung
1
useContext(ThemeContext)
Hook, der den Wert vom nächstgelegenen passenden Provider weiter oben im Baum nutzt.