Next.js 15 for fullstack-webapper · leksjon

Props og kommunikasjon mellom komponenter

Bli fortrolig med å sende data mellom overordnede og underordnede komponenter ved hjelp av props for et fleksibelt brukergrensesnitt.

Leksjon 3 av 410 trinn

Props og kommunikasjon mellom komponenter er en gratis leksjon i Next.js 15 for fullstack-webapper på CoddyKit. Dette er leksjon 3 av 4. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Next.js 15 for fullstack-webapper, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Next.js 15 for fullstack-webapper inneholder totalt 4 leksjoner.

Introduksjon til komponentprops

I React er props (kort for properties) måten De sender data fra en overordnet komponent til en underordnet komponent på.

Tenk på dem som argumenter til en funksjon. De gjør komponentene gjenbrukbare og dynamiske, slik at de kan vise ulik informasjon basert på dataene de mottar.

Enveis dataflyt

Et av grunnprinsippene i React er enveis dataflyt. Det betyr at data alltid beveger seg i én retning: fra overordnet til underordnet komponent.

Overordnede komponenter eier og håndterer dataene.
De sender dataene videre til de underordnede komponentene ved hjelp av props.
Underordnede komponenter mottar props og gjengir innhold basert på dem.
Underordnede komponenter kan ikke endre props direkte; props er skrivebeskyttet.

Deres første prop

La oss se hvordan De kan sende en enkel streng som prop. Vi oppretter en Greeting-komponent som mottar en name-prop.

Legg merke til hvordan App (overordnet komponent) sender name="Alice" til Greeting (underordnet 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 />);

Sende ulike datatyper

Props brukes ikke bare til strenger! De kan sende tall, boolske verdier, matriser og objekter. Når De sender andre verdier enn strenger, må De omslutte dem med krøllparenteser {}.

Dette eksempelet viser en ProductCard som mottar ulike 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 av props for tydelighet

Det kan bli gjentakende å hente props som props.name. En ryddigere måte er å bruke objektdestrukturering direkte i funksjonssignaturen til komponenten.

Dette gjør koden mer lesbar ved å vise tydelig 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 spesielle «children»-propen

React har en spesiell prop kalt children. Denne propen inneholder automatisk alt innholdet De sender mellom komponentens åpnings- og avslutningstagger.

Den egner seg perfekt til å opprette wrapper-komponenter som kort, oppsett 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

Siden data flyter nedover, hvordan forteller en underordnet komponent den overordnede komponenten at noe har skjedd (f.eks. at en knapp ble klikket)? De sender en funksjon som prop!

Den underordnede komponenten kaller denne funksjonen, og den overordnede komponenten kan deretter reagere på hendelsen. Dette kalles 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

Selv om props er nyttige, kan det bli tungvint å sende dem gjennom mange lag med nestede komponenter. Dette kalles prop drilling.

Hvis De oppdager at De sender den samme propen gjennom tre eller flere komponenter bare for å nå en dypt nestet underordnet komponent, kan det være et tegn på at De bør vurdere andre mønstre, for eksempel React Context API eller biblioteker for tilstandshåndtering (som vi tar for oss i senere leksjoner!).

Prop-utfordring

Hvilke av følgende påstander om React-props er sanne?

Besvar den i den interaktive leksjonen

Oppsummering: Props, dataene i brukergrensesnittet

De behersker nå props, et grunnleggende konsept i React!

Props sender data fra overordnede til underordnede komponenter.
Dataflyten er enveis; underordnede komponenter kan ikke endre props.
De kan sende ulike datatyper (strenger, tall, objekter og funksjoner).
Destrukturering av props gjør koden ryddigere.
children-propen gjør det mulig å bygge inn fleksibelt innhold.
Callback-props muliggjør kommunikasjon fra underordnet til overordnet komponent.

Props er grunnlaget for å bygge dynamiske og gjenbrukbare React-komponenter. Fortsett å øve, så kan De snart bygge komplekse brukergrensesnitt!

Gratis å komme i gang

Lær deg TypeScript med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 12
Leksjoner: 48

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Props og kommunikasjon mellom komponenter» gratis?

Ja – du kan lese valgfritt 3 av leksjonene i læringsstien Next.js 15 for fullstack-webapper, inkludert «Props og kommunikasjon mellom komponenter», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i Next.js 15 for fullstack-webapper inneholder totalt 4 leksjoner.

Hva lærer jeg i «Props og kommunikasjon mellom komponenter»?

Bli fortrolig med å sende data mellom overordnede og underordnede komponenter ved hjelp av props for et fleksibelt brukergrensesnitt. Du øver på Next.js 15 for fullstack-webapper med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med Next.js 15 for fullstack-webapper?

Ingen tidligere erfaring er nødvendig. Next.js 15 for fullstack-webapper på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 3 av 4.

Hvor lang tid tar leksjonen «Props og kommunikasjon mellom komponenter»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne Next.js 15 for fullstack-webapper-leksjonen?

Ja. Alle Next.js 15 for fullstack-webapper-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

React-komponenter og JSX
Tilstandshåndtering med Hooks
Props og kommunikasjon mellom komponenter
Gjengivelse av lister, nøkler og betinget UI

← Tilbake til Next.js 15 for fullstack-webapper