Wie verwende ich die Kontext-API in Reactjs?

Die Kontext API in Reactjs wird verwendet, um Daten durch den Komponentenbaum zu “prop drilling” zu übergeben, ohne immer Props an jeden Zwischenkomponenten manuell durchlaufen zu müssen.

So verwendest du die Kontext API:

1. Kontext erstellen: Verwende `React.createContext()` um einen Kontext zu erstellen. ```jsx const MyContext = React.createContext(defaultValue); ```
2. Kontext Provider: Du stellst den Kontext mit dem Provider zur Verfügung. Alle Komponenten innerhalb dieses Providers können auf den Wert des Kontexts zugreifen. ```jsx ```
3. Kontext verwenden: Es gibt zwei Wege, um auf den Wert des Kontexts zuzugreifen. – Mit dem ‘Context.Consumer’: Diese Methode verwendet das Render Props Pattern. ```jsx {value => /* render something based on the context value */} ``` – Mit dem Hook ‘useContext’: Diese Methode kann innerhalb von funktionalen Komponenten verwendet werden ```jsx const value = useContext(MyContext); ```

Beispiel:
```jsx
// Kontext erstellen
const MyContext = React.createContext(‘’);

// Eine Komponente, die den Kontext verwendet
function MyComponent() { const value = React.useContext(MyContext); return

{value}

;
}

function App() { return ( // Kontext Provider );
}
```
In diesem Beispiel wird die `App` Komponente den `MyComponent` mit dem Provider umhüllen und `Hello from context!` als Wert liefern. Der `MyComponent` wird diesen Wert dann über den Context abrufen und anzeigen.