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

javascript

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

React.createContext('light')

Initialisiert ein Context-Objekt mit einem Standardwert von 'light'.

ThemeContext.Provider value="dark"

Stellt allen Nachkommen im Komponentenbaum den Wert 'dark' zur Verfügung.

React.useContext(ThemeContext)

Konsumiert den aktuellen Wert des nächstgelegenen passenden Providers im Baum.

Vorheriges Snippet Nächstes Snippet

Mehr JavaScript-Übungen für Fortgeschrittene →

State-Sharing mit der Context API

Verwandt