Context in React is een krachtige functionaliteit waarmee gegevens gedeeld kunnen worden tussen componenten zonder dat props expliciet op elk niveau van de componentenboom hoeven te worden doorgegeven. Met Context kunnen we data doorgeven door de componenthiërarchie, waardoor deze eenvoudig toegankelijk is voor elk component, ongeacht de positie in de boom.

Opmerking

Om te beginnen, gaan we dieper in op de syntaxis. We bieden een stapsgewijze handleiding, zodat elk concept duidelijk wordt uitgelegd. Het toepassen van context vereist specifieke code-implementatie op verschillende componentniveaus. Zodra we de syntaxis volledig hebben behandeld, gaan we verder met een praktisch voorbeeld.

Syntaxis:

Stap 1: We maken een nieuwe Context aan met behulp van de functie createContext() uit de React-bibliotheek en wijzen deze toe aan een variabele. Dit doen we op het hoogste niveau van de applicatie. Meestal gebeurt dit in een apart bestand (bijvoorbeeld context.js). Dit bestand is verantwoordelijk voor het Context-object.

context.js

import { createContext } from "react";

// Create a new React context using the `createContext` function.
const Context = createContext();

// Export the created context so that it can be used in other parts of the application.
export default Context;

Stap 2: In het App-bestand worden alle componenten die toegang nodig hebben tot de gedeelde data omwikkeld met de Provider-component van de aangemaakte Context. De Provider-component maakt het mogelijk om de waarde van de context te definiëren en beschikbaar te stellen aan alle onderliggende componenten die deze context gebruiken.

App.jsx

import React from "react";

// Import the `Context` object from `../context`.
import Context from "../context";

// Import child components that need access to the shared data.
import ChildCompOne from "../ChildCompOne/ChildCompOne";
import ChildCompTwo from "../ChildCompTwo/ChildCompTwo";

const App = () => {
  return (
    // Wrap the child components with `Context.Provider`.
    <Context.Provider>
      <ChildCompOne />
      <ChildCompTwo />
    </Context.Provider>
  );
};

export default App;

Stap 3: In het App-bestand moet ook de contextdata worden meegegeven. Dit wordt bereikt door de value-prop te gebruiken voor de Context.Provider-component. Alle benodigde data wordt toegewezen aan de value-prop.

App.jsx

import React from "react";

import Context from "../context";

import ChildCompOne from "../ChildCompOne/ChildCompOne";
import ChildCompTwo from "../ChildCompTwo/ChildCompTwo";

const App = () => {
  // Define any data that you want to share across child components.
  const sharedData = "Some shared data";

  return (
    // Provide the shared data as a value to `Context.Provider`.
    <Context.Provider value={sharedData}>
      <ChildCompOne />
      <ChildCompTwo />
    </Context.Provider>
  );
};

export default App;

Stap 4: In de kindcomponenten (ChildCompOne of ChildCompTwo) kan de gedeelde data worden benaderd met behulp van de useContext-hook. Om de useContext-hook te gebruiken, moet de aangemaakte Context uit het context.js-bestand als argument worden meegegeven.

ChildCompOne.jsx

import React, { useContext } from "react";

// Import the `Context` object from "../context"
import Context from "../context";

const ChildComponentOne = () => {
  // Use the `useContext` hook to access data from the `Context`
  const data = useContext(Context);

  // You can now use the shared data in this component

  return <div>{data} in the first component</div>;
};

export default ChildComponentOne;

Volledige app-code:

Opmerking

Neem even de tijd om elke stap te bekijken, open elk bestand en elke map, zodat je het proces duidelijk begrijpt. In het volgende hoofdstuk gaan we verder met een voorbeeld waarin Context en hooks worden gecombineerd. Zo kun je zien hoe deze concepten in de praktijk samenwerken.