Ein benutzerdefinierter Anbieter in Reactjs wird oft verwendet, um den Kontext eines bestimmten Bereichs der Anwendung zu definieren. Einfach ausgedrückt, ein Anbieter ermöglicht es Ihnen, einen Zustand zu erstellen und diesen Zustand an verschiedene Teile Ihrer Anwendung weiterzugeben, die ihn benötigen.
Um einen benutzerdefinierten Anbieter in Reactj zu erstellen und zu verwenden, können Sie die folgenden Schritte befolgen:
1. Importieren Sie React und createContext von ‘react’.
```javascript
import React, { createContext, useReducer } from ‘react’;
```
2. Erstellen Sie Ihren Kontext.
```javascript
export const YourContext = createContext();
```
3. Erstellen Sie Ihren benutzerdefinierten Anbieter.
```javascript
export const YourProvider = (props) => {
const [state, dispatch] = useReducer(yourReducer, yourInitialState);
In diesem Code erstellen sie einen Zustand und einen Reducer mit der useReducer Hook von React. Sie geben dann diesen Zustand und den Reducer an die value-Eigenschaft des Providers, sodass diese Werte für alle Kindkomponenten verfügbar sind.
4. Um den Anbieter in Ihrer Anwendung zu verwenden, können Sie ihn in Ihrer Hauptkomponente (oft ist dies die App.js-Komponente) um Ihre Kindkomponenten herum einbetten.
```javascript
import { YourProvider } from ‘./YourProvider’;
function App() {
return (
}
export default App;
```
In dieser Codezeile ermöglichen Sie es allen Kindkomponenten innerhalb von `
5. In jeder Kindkomponente, die auf den Kontext zugreifen muss, importieren Sie useContext und YourContext und nutzen Sie den Kontext.
```javascript
import React, { useContext } from ‘react’;
import { YourContext} from ‘./YourProvider’;
function YourChildComponent() { const [state, dispatch] = useContext(YourContext);
// Nun kann der Zustand und die dispatch Funktion verwendet werden } ```In dieser Codezeile erstellt useContext eine Verbindung zu dem nächstgelegensten Provider in der Baumstruktur, der dem in useContext angegebenen entspricht. Es gibt den Wert zurück, den der Provider bereitgestellt hat.
