Context i React er en kraftfuld funktion, der muliggør deling af data mellem komponenter uden behov for eksplicit videresendelse af props på hvert niveau i komponenttræet. Ved at bruge Context kan vi videreføre data ned gennem komponenthierarkiet, hvilket gør det let tilgængeligt for enhver komponent, uanset dens placering i træet.

Bemærk

For at komme i gang skal vi dykke ned i syntaksen. Vi giver en trinvis vejledning, så du forstår hvert enkelt koncept undervejs. Anvendelse af context kræver specifik kodeimplementering på forskellige komponentniveauer. Når vi har gennemgået syntaksen grundigt, fortsætter vi med et praktisk eksempel.

Syntaks:

1. trin: Vi opretter en ny Context ved hjælp af funktionen createContext() fra React-biblioteket og tildeler den til en variabel. Dette bør gøres på det øverste niveau af applikationen. Typisk gøres det i en separat fil (f.eks. context.js). Denne fil vil være ansvarlig for Context-objektet.

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;

2. trin: I App-filen omsluttes alle komponenter, der skal have adgang til de delte data, med Provider-komponenten fra den oprettede Context. Provider-komponenten gør det muligt at definere værdien af context og gøre den tilgængelig for alle underkomponenter, der forbruger denne context.

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;

3. trin: I App-filen skal vi også stille context-data til rådighed. Dette opnås ved at bruge value-proppen på Context.Provider-komponenten. Alle nødvendige data tildeles til value-proppen.

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;

4. trin: I underkomponenterne (ChildCompOne eller ChildCompTwo) kan de delte data tilgås ved hjælp af useContext-hooken. For at bruge useContext-hooken skal det oprettede Context fra context.js-filen gives som argument.

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;

Fuld app-kode:

Bemærk

Tag venligst et øjeblik til at gennemgå hvert trin, åbn hver fil og mappe, for at sikre at du tydeligt forstår processen. Det næste kapitel fortsætter med et eksempel, der kombinerer Context og hooks. Dette vil give dig mulighed for at se, hvordan disse koncepter fungerer sammen i praksis.