Bruk av Context i et Reelt Scenario
La oss lage en bloggkilde om planetene. Vi skal bruke Context
for å unngå prop drilling. Appen vil bestå av følgende komponenter: App
, Filter
, PlanetList
og PlanetItem
. For å visualisere hierarkiet, vennligst se bildet nedenfor.
Steg 1
Opprett Context
i filen context.js
på øverste nivå.
import { createContext } from "react";
const Context = createContext();
export default Context;
Steg 2
Gjør hele applikasjonen oppmerksom på at vi bruker context. Derfor må vi pakke hele appen inn i Context.Provider
i App.jsx
-filen.
import React from "react";
import Context from "../context";
import Filter from "../Filter/Filter";
import PlanetList from "../PlanetList/PlanetList";
const App = () => {
return (
<Context.Provider>
<div>
<Filter />
<PlanetList />
</div>
</Context.Provider>
);
};
export default App;
Steg 3
I dette steget må vi sette context-dataen (value
-prop for Context.Provider
-komponenten). Vi starter med å vise noen data. Dataene presenteres som et array av objekter:
const planetData = [
{
id: "3a6d44da-bbe2-4ac2-a622-7ca5f321b71c",
name: "Mercury",
weight: "3.3011 × 10^23 kg",
size: "4,879 km",
distanceFromSun: "57.9 million km",
material: "Rocky",
image:
"https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/react/react-hooks-%26-context/mercury.png",
existenceYears: "4.5 billion years",
},
...
{...}
];
Dette gjør vi:
Importer data fra data.js
-filen
import data from "../data";
Initialiser state for planets
som et tomt array ved å bruke useState
-hooken.
import React, { useState } from "react";
// ...
const [planets, setPlanets] = useState([]);
Bruk useEffect
-hooken for å tildele de importerte dataene til planets
-variabelen. Dette sikrer at vi har data å vise.
import React, { useState, useEffect } from "react";
// ...
useEffect(() => {
setPlanets(data);
}, []);
Opprett variabelen appData
, som representerer alle app-dataene, og som vil være et objekt med planets
-state.
const appData = { planets };
Tildel appData
-variabelen til value
-propen til context-provider.
return (
<Context.Provider value={appData}>
<div>
<Filter />
<PlanetList />
</div>
</Context.Provider>
);
Full kode for App.jsx
-filen etter steg tre.
import React, { useEffect, useState } from "react";
import Context from "../context";
import data from "../data";
import Filter from "../Filter/Filter";
import PlanetList from "../PlanetList/PlanetList";
const App = () => {
const [planets, setPlanets] = useState([]);
useEffect(() => {
setPlanets(data);
}, []);
const appData = { planets };
return (
<Context.Provider value={appData}>
<div>
<Filter />
<PlanetList />
</div>
</Context.Provider>
);
};
export default App;
Steg 4
La oss se nærmere på PlanetList
-komponenten. Formålet er å gjengi en spesifikk markup. Inne i denne markuppen bruker vi PlanetItem
-komponenten. Det er verdt å merke seg at vi ikke sender noen props eller bruker context i denne komponenten, siden det ikke er behov for å jobbe med data på dette nivået.
import React from "react";
import PlanetItem from "../PlanetItem/PlanetItem";
const PlanetList = () => {
return (
<ul>
<PlanetItem />
</ul>
);
};
export default PlanetList;
Steg 5
I dette steget må vi få tilgang til dataene for å vise informasjon om planetene. For å gjøre dette følger vi disse trinnene:
Importer Context
fra context.js
-filen.
import Context from "../context";
Bruk useContext
-hooken for å hente planets
-dataene fra context.
import React, { useContext } from "react";
// ...
const { planets } = useContext(Context);
Render markup ved å bruke map
-funksjonen, som lar oss iterere over datasettet i React. Bruk destrukturering for å få tilgang til alle egenskapene til hvert planet-objekt.
return (
<>
{planets.map(
({
id,
name,
weight,
size,
distanceFromSun,
material,
image,
existenceYears,
}) => (
<li key={id}>
<img src={image} alt={name} width={160} />
<div>
<h3>{name}</h3>
<p>
Weight: <span>{weight}</span>
</p>
<p>
Size: <span>{size}</span>
</p>
<p>
Distance form Sun: <span>{distanceFromSun}</span>
</p>
<p>
Material: <span>{material}</span>
</p>
<p>
Old: <span>{existenceYears}</span>
</p>
</div>
</li>
)
)}
</>
);
Fullstendig kode for PlanetItem.jsx
-filen etter steg fem.
import React, { useContext } from "react";
import Context from "../context";
const PlanetItem = () => {
const { planets } = useContext(Context);
return (
<>
{planets.map(
({
id,
name,
weight,
size,
distanceFromSun,
material,
image,
existenceYears,
}) => (
<li key={id}>
<img src={image} alt={name} width={160} />
<div>
<h3>{name}</h3>
<p>
Weight: <span>{weight}</span>
</p>
<p>
Size: <span>{size}</span>
</p>
<p>
Distance form Sun: <span>{distanceFromSun}</span>
</p>
<p>
Material: <span>{material}</span>
</p>
<p>
Old: <span>{existenceYears}</span>
</p>
</div>
</li>
)
)}
</>
);
};
export default PlanetItem;
Fullstendig app-kode:
Ta gjerne en gjennomgang av hele prosjektet, og legg merke til den overordnede funksjonaliteten og strukturen. For nå anbefales det å fokusere på å forstå hvordan dataene sendes og vises i de ulike komponentene. Merk hvordan dataene hentes og brukes i barnekomponentene, med unntak av Filter
-komponenten. Filter
-komponenten vil være en utfordring i neste kapittel, slik at du kan videreutvikle appens funksjonalitet.
Takk for tilbakemeldingene dine!
Spør AI
Spør AI
Spør om hva du vil, eller prøv ett av de foreslåtte spørsmålene for å starte chatten vår
Awesome!
Completion rate improved to 2.17
Bruk av Context i et Reelt Scenario
Sveip for å vise menyen
La oss lage en bloggkilde om planetene. Vi skal bruke Context
for å unngå prop drilling. Appen vil bestå av følgende komponenter: App
, Filter
, PlanetList
og PlanetItem
. For å visualisere hierarkiet, vennligst se bildet nedenfor.
Steg 1
Opprett Context
i filen context.js
på øverste nivå.
import { createContext } from "react";
const Context = createContext();
export default Context;
Steg 2
Gjør hele applikasjonen oppmerksom på at vi bruker context. Derfor må vi pakke hele appen inn i Context.Provider
i App.jsx
-filen.
import React from "react";
import Context from "../context";
import Filter from "../Filter/Filter";
import PlanetList from "../PlanetList/PlanetList";
const App = () => {
return (
<Context.Provider>
<div>
<Filter />
<PlanetList />
</div>
</Context.Provider>
);
};
export default App;
Steg 3
I dette steget må vi sette context-dataen (value
-prop for Context.Provider
-komponenten). Vi starter med å vise noen data. Dataene presenteres som et array av objekter:
const planetData = [
{
id: "3a6d44da-bbe2-4ac2-a622-7ca5f321b71c",
name: "Mercury",
weight: "3.3011 × 10^23 kg",
size: "4,879 km",
distanceFromSun: "57.9 million km",
material: "Rocky",
image:
"https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/react/react-hooks-%26-context/mercury.png",
existenceYears: "4.5 billion years",
},
...
{...}
];
Dette gjør vi:
Importer data fra data.js
-filen
import data from "../data";
Initialiser state for planets
som et tomt array ved å bruke useState
-hooken.
import React, { useState } from "react";
// ...
const [planets, setPlanets] = useState([]);
Bruk useEffect
-hooken for å tildele de importerte dataene til planets
-variabelen. Dette sikrer at vi har data å vise.
import React, { useState, useEffect } from "react";
// ...
useEffect(() => {
setPlanets(data);
}, []);
Opprett variabelen appData
, som representerer alle app-dataene, og som vil være et objekt med planets
-state.
const appData = { planets };
Tildel appData
-variabelen til value
-propen til context-provider.
return (
<Context.Provider value={appData}>
<div>
<Filter />
<PlanetList />
</div>
</Context.Provider>
);
Full kode for App.jsx
-filen etter steg tre.
import React, { useEffect, useState } from "react";
import Context from "../context";
import data from "../data";
import Filter from "../Filter/Filter";
import PlanetList from "../PlanetList/PlanetList";
const App = () => {
const [planets, setPlanets] = useState([]);
useEffect(() => {
setPlanets(data);
}, []);
const appData = { planets };
return (
<Context.Provider value={appData}>
<div>
<Filter />
<PlanetList />
</div>
</Context.Provider>
);
};
export default App;
Steg 4
La oss se nærmere på PlanetList
-komponenten. Formålet er å gjengi en spesifikk markup. Inne i denne markuppen bruker vi PlanetItem
-komponenten. Det er verdt å merke seg at vi ikke sender noen props eller bruker context i denne komponenten, siden det ikke er behov for å jobbe med data på dette nivået.
import React from "react";
import PlanetItem from "../PlanetItem/PlanetItem";
const PlanetList = () => {
return (
<ul>
<PlanetItem />
</ul>
);
};
export default PlanetList;
Steg 5
I dette steget må vi få tilgang til dataene for å vise informasjon om planetene. For å gjøre dette følger vi disse trinnene:
Importer Context
fra context.js
-filen.
import Context from "../context";
Bruk useContext
-hooken for å hente planets
-dataene fra context.
import React, { useContext } from "react";
// ...
const { planets } = useContext(Context);
Render markup ved å bruke map
-funksjonen, som lar oss iterere over datasettet i React. Bruk destrukturering for å få tilgang til alle egenskapene til hvert planet-objekt.
return (
<>
{planets.map(
({
id,
name,
weight,
size,
distanceFromSun,
material,
image,
existenceYears,
}) => (
<li key={id}>
<img src={image} alt={name} width={160} />
<div>
<h3>{name}</h3>
<p>
Weight: <span>{weight}</span>
</p>
<p>
Size: <span>{size}</span>
</p>
<p>
Distance form Sun: <span>{distanceFromSun}</span>
</p>
<p>
Material: <span>{material}</span>
</p>
<p>
Old: <span>{existenceYears}</span>
</p>
</div>
</li>
)
)}
</>
);
Fullstendig kode for PlanetItem.jsx
-filen etter steg fem.
import React, { useContext } from "react";
import Context from "../context";
const PlanetItem = () => {
const { planets } = useContext(Context);
return (
<>
{planets.map(
({
id,
name,
weight,
size,
distanceFromSun,
material,
image,
existenceYears,
}) => (
<li key={id}>
<img src={image} alt={name} width={160} />
<div>
<h3>{name}</h3>
<p>
Weight: <span>{weight}</span>
</p>
<p>
Size: <span>{size}</span>
</p>
<p>
Distance form Sun: <span>{distanceFromSun}</span>
</p>
<p>
Material: <span>{material}</span>
</p>
<p>
Old: <span>{existenceYears}</span>
</p>
</div>
</li>
)
)}
</>
);
};
export default PlanetItem;
Fullstendig app-kode:
Ta gjerne en gjennomgang av hele prosjektet, og legg merke til den overordnede funksjonaliteten og strukturen. For nå anbefales det å fokusere på å forstå hvordan dataene sendes og vises i de ulike komponentene. Merk hvordan dataene hentes og brukes i barnekomponentene, med unntak av Filter
-komponenten. Filter
-komponenten vil være en utfordring i neste kapittel, slik at du kan videreutvikle appens funksjonalitet.
Takk for tilbakemeldingene dine!