Context i React er en kraftig funksjon som muliggjør deling av data mellom komponenter uten at man eksplisitt må sende props på hvert nivå i komponenttreet. Ved å bruke Context kan vi sende data nedover i komponenthierarkiet, slik at det blir lett tilgjengelig for enhver komponent, uavhengig av dens plassering i treet.

Merk

For å komme i gang, skal vi se nærmere på syntaksen. Vi gir en trinnvis veiledning, slik at du forstår hvert konsept underveis. Bruk av context krever spesifikk kodeimplementering på ulike komponentnivåer. Når vi har dekket syntaksen grundig, går vi videre til et praktisk eksempel.

Syntaks:

1. steg: Vi oppretter en ny Context ved å bruke createContext()-funksjonen fra React-biblioteket og tilordner den til en variabel. Dette bør gjøres på øverste nivå i applikasjonen. Vanligvis gjør vi dette i en egen fil (for eksempel context.js). Denne filen har ansvar 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. steg: I App-filen omsluttes alle komponenter som trenger tilgang til de delte dataene med Provider-komponenten fra den opprettede Context. Provider-komponenten gjør det mulig å definere verdien til konteksten og gjøre den tilgjengelig for alle barnekomponenter som konsumerer denne konteksten.

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. steg: I App-filen må vi også oppgi kontekstdataene. Dette gjøres ved å bruke value-prop'en til Context.Provider-komponenten. Alle nødvendige data tildeles til value-prop'en.

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. steg: I barnekomponentene (ChildCompOne eller ChildCompTwo) kan de delte dataene nås ved hjelp av useContext-hooken. For å bruke useContext-hooken må det opprettede Context fra context.js-filen sendes inn 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;

Fullstendig appkode:

Merk

Ta deg tid til å gjennomgå hvert steg, åpne hver fil og mappe, for å sikre at du tydelig forstår prosessen. Neste kapittel fortsetter med et eksempel som kombinerer Context og hooks. Dette vil gi deg mulighet til å se hvordan disse konseptene fungerer sammen i praksis.