Next.js 15-fullstackwebapps · Lektion

Props og kommunikation mellem komponenter

Bliv fortrolig med at sende data mellem parent- og child-komponenter ved hjælp af props for at skabe fleksible brugergrænseflader.

Lektion 3 af 410 trin

Props og kommunikation mellem komponenter er en gratis Next.js 15-fullstackwebapps-lektion på CoddyKit. Dette er lektion 3 af 4. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i Next.js 15-fullstackwebapps, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Next.js 15-fullstackwebapps-kurset indeholder 4 lektioner i alt.

Introduktion til komponentprops

I React er props (en forkortelse for properties) den måde, du sender data fra en overordnet komponent til en underordnet komponent på.

Tænk på dem som argumenter til en funktion. De gør det muligt at genbruge dine komponenter og gøre dem dynamiske, så de viser forskellige oplysninger afhængigt af de data, de modtager.

Ensrettet dataflow

Et af Reacts grundprincipper er ensrettet dataflow. Det betyder, at data altid bevæger sig i én retning: fra overordnet komponent til underordnet komponent.

Overordnede komponenter ejer og håndterer data.
De sender disse data videre til deres underordnede komponenter ved hjælp af props.
Underordnede komponenter modtager props og gengiver indhold baseret på dem.
Underordnede komponenter kan ikke ændre de props, de modtager, direkte; props er skrivebeskyttede.

Din første prop

Lad os se, hvordan du sender en simpel streng som prop. Vi opretter en Greeting-komponent, der modtager en name-prop.

Bemærk, hvordan App (den overordnede komponent) sender name="Alice" til Greeting (den underordnede komponent).

import React from 'react';
import ReactDOM from 'react-dom/client';

// Child Component
function Greeting(props) {
  // Access the 'name' prop using props.name
  return <p>Hello, {props.name}!</p>;
}

// Parent Component
function App() {
  return (
    <div>
      <Greeting name="Alice" />
      <Greeting name="Bob" />
    </div>
  );
}

// Render the App component
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

Afsendelse af forskellige datatyper

Props er ikke kun til strenge! Du kan sende tal, boolske værdier, arrays og objekter. Når du sender værdier, der ikke er strenge, skal du omslutte dem med tuborgklammer {}.

Dette eksempel viser en ProductCard, der modtager forskellige datatyper.

import React from 'react';
import ReactDOM from 'react-dom/client';

function ProductCard(props) {
  return (
    <div style={{ border: '1px solid gray', padding: '10px', margin: '10px' }}>
      <h3>{props.productName}</h3>
      <p>Price: ${props.price.toFixed(2)}</p>
      <p>In Stock: {props.inStock ? 'Yes' : 'No'}</p>
      <p>Features:</p>
      <ul>
        {props.features.map((feature, index) => (
          <li key={index}>{feature}</li>
        ))}
      </ul>
    </div>
  );
}

function App() {
  const laptop = {
    name: "Super Laptop",
    price: 1200.50,
    available: true,
    specs: ["Fast CPU", "16GB RAM", "512GB SSD"]
  };

  return (
    <div>
      <ProductCard
        productName={laptop.name}
        price={laptop.price}
        inStock={laptop.available}
        features={laptop.specs}
      />
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

Destrukturering af props for tydelighed

Det kan blive gentagende at tilgå props som props.name. En mere overskuelig måde er at bruge objektdestrukturering direkte i komponentens funktionssignatur.

Det gør din kode mere læsbar ved tydeligt at vise, hvilke props en komponent forventer.

import React from 'react';
import ReactDOM from 'react-dom/client';

// Before: function Greeting(props) { return <p>Hello, {props.name}!</p>; }
// After destructuring:
function Greeting({ name }) {
  return <p>Hello, {name}!</p>;
}

function App() {
  return (
    <div>
      <Greeting name="Charlie" />
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

Den særlige 'children'-prop

React har en særlig prop, der hedder children. Denne prop indeholder automatisk det indhold, du sender mellem en komponents åbnings- og afslutningstags.

Den er perfekt til at oprette wrapper-komponenter som kort, layouts eller modaler.

import React from 'react';
import ReactDOM from 'react-dom/client';

function Card({ title, children }) {
  return (
    <div style={{ border: '1px solid #ddd', padding: '15px', margin: '10px', borderRadius: '8px' }}>
      <h4>{title}</h4>
      <div style={{ marginTop: '10px' }}>
        {children}
      </div>
    </div>
  );
}

function App() {
  return (
    <div>
      <Card title="User Profile">
        <p>Name: <b>Jane Doe</b></p>
        <p>Email: jane@example.com</p>
        <button>Edit Profile</button>
      </Card>
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

Fra underordnet til overordnet: Callback-props

Data flyder nedad, men hvordan fortæller en underordnet komponent sin overordnede komponent, at der er sket noget (f.eks. at der er klikket på en knap)? Du sender en funktion som prop!

Den underordnede komponent kalder denne funktion, hvorefter den overordnede komponent kan reagere på hændelsen. Det kaldes ofte en 'callback-prop'.

import React from 'react';
import ReactDOM from 'react-dom/client';

// Child Component
function MyButton({ onClick, label }) {
  return (
    <button onClick={onClick}>
      {label}
    </button>
  );
}

// Parent Component
function App() {
  const handleButtonClick = () => {
    alert("Button clicked inside the child component!");
  };

  return (
    <div>
      <p>Parent says: Click the button below!</p>
      <MyButton onClick={handleButtonClick} label="Trigger Parent" />
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

Når props ikke er nok

Props er effektive, men det kan blive besværligt at sende dem gennem mange lag af indlejrede komponenter. Det kaldes prop-drilling.

Hvis du opdager, at du sender den samme prop gennem 3 eller flere komponenter blot for at nå frem til en dybt indlejret underordnet komponent, kan det være et tegn på, at du bør overveje andre mønstre som React Context API eller biblioteker til tilstandshåndtering (det gennemgår vi i kommende lektioner!).

Prop-udfordring

Hvilke af følgende udsagn om React-props er sande?

Besvar den i den interaktive lektion

Opsummering: Props, din brugerflades data

Du har fået styr på props, som er et grundlæggende begreb i React!

Props sender data fra overordnede til underordnede komponenter.
Dataflowet er ensrettet; underordnede komponenter kan ikke ændre props.
Du kan sende forskellige datatyper (strenge, tal, objekter og funktioner).
Destrukturering af props gør din kode mere overskuelig.
Med children-propen kan du indlejre fleksibelt indhold.
Callback-props muliggør kommunikation fra underordnede til overordnede komponenter.

Props er grundlaget for at bygge dynamiske og genanvendelige React-komponenter. Bliv ved med at øve dig, så bygger du komplekse brugerflader på ingen tid!

Gratis at komme i gang

Lær TypeScript med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser: 12
Lektioner: 48

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “Props og kommunikation mellem komponenter” gratis?

Ja — alle 3 lektioner i læringssporet Next.js 15-fullstackwebapps, inklusive “Props og kommunikation mellem komponenter”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Next.js 15-fullstackwebapps-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Props og kommunikation mellem komponenter”?

Bliv fortrolig med at sende data mellem parent- og child-komponenter ved hjælp af props for at skabe fleksible brugergrænseflader. Du øver dig i Next.js 15-fullstackwebapps med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på Next.js 15-fullstackwebapps?

Der kræves ingen tidligere erfaring. Next.js 15-fullstackwebapps på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 3 af 4.

Hvor lang tid tager lektionen “Props og kommunikation mellem komponenter”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne Next.js 15-fullstackwebapps-lektion?

Ja. Alle Next.js 15-fullstackwebapps-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

React-komponenter og JSX
Statehåndtering med hooks
Props og kommunikation mellem komponenter
Rendering af lister, keys og betinget UI

← Tilbage til Next.js 15-fullstackwebapps