I React er props (forkortelse for properties) en effektiv mekanisme til at tilpasse og videregive data fra en forælder- til en barnekomponent. Denne funktion gør det muligt at oprette genanvendelige og fleksible komponenter i applikationen.

Videregivelse af props

Forestil dig, at vi bygger en onlinebutik.

I dette scenarie har vi en hovedkomponent kaldet App, og vi ønsker at vise produktinformation ved hjælp af en Product-komponent. Vi kan videregive produktnavn og pris som props fra App til Product.

Sådan gøres det i praksis:

// Parent Component (`App`)
const App = () => (
  <>
    <h1>Online Store</h1>
    <Product name="Green iguana" price={579} />
  </>
);

I App-komponenten inkluderer vi Product-komponenten og videregiver props: name med værdien "Green iguana" og price med værdien 579.

Modtagelse og brug af props

Lad os nu se på Product-komponenten, som modtager disse props:

// Child Component (`Product`)
const Product = (props) => (
  <>
    <p>Product name: {props.name}</p>
    <p>Price: ${props.price}</p>
  </>
);

I Product-komponenten definerer vi den til at acceptere et enkelt argument kaldet props. Inde i komponenten kan vi få adgang til værdierne af disse props ved at bruge punktum (.)-notationen efterfulgt af egenskabsnavnet (f.eks. props.name og props.price).

Praktisk anvendelse

Med denne tilgang har vi oprettet en Product-komponent, der kan genbruges med forskellige produktoplysninger flere gange. Vi kan nemt tilpasse tekstindholdet for hver Product-komponent ved at angive forskellige props.

<Product name="Yellow cheetah" price={1099} />
<Product name="Panda" price={449} />

Nu har vi fleksibilitet til at vise forskellige produktoplysninger ved hjælp af den samme Product-komponent.

Fuld app-kode: