Context i React är en kraftfull funktion som möjliggör delning av data mellan komponenter utan att behöva explicit skicka props på varje nivå i komponentträdet. Med Context kan vi sprida data nedåt i komponenthierarkin, vilket gör den lättillgänglig för alla komponenter, oavsett deras position i trädet.

Observera

För att komma igång går vi igenom syntaxen steg för steg. Vi tillhandahåller en vägledning så att varje koncept blir tydligt. Att använda context kräver specifik kodimplementering på olika komponentnivåer. När vi har gått igenom syntaxen i detalj, fortsätter vi med ett praktiskt exempel.

Syntax:

Steg 1: Skapa ett nytt Context med hjälp av funktionen createContext() från React-biblioteket och tilldela det till en variabel. Detta bör göras på applikationens toppnivå. Vanligtvis görs detta i en separat fil (t.ex. context.js). Denna fil ansvarar för 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;

Steg 2: I App-filen omsluts alla komponenter som behöver tillgång till den delade datan med Provider-komponenten från den skapade Context. Provider-komponenten gör det möjligt att definiera värdet för context och göra det tillgängligt för alla barnkomponenter som konsumerar 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;

Steg 3: I App-filen måste vi även tillhandahålla context-data. Detta görs genom att använda value-prop för Context.Provider-komponenten. All data som behövs tilldelas till 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;

Steg 4: I barnkomponenterna (ChildCompOne eller ChildCompTwo) kan den delade datan nås med hjälp av hooken useContext. För att använda useContext måste det skapade Context från context.js-filen skickas 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;

Fullständig appkod:

Obs

Ta dig tid att gå igenom varje steg, öppna varje fil och mapp, för att säkerställa att du tydligt förstår processen. Nästa kapitel fortsätter med ett exempel som kombinerar Context och hooks. Detta gör att du kan se hur dessa koncept fungerar tillsammans i praktiken.