I React är props (förkortning för properties) en kraftfull mekanism för att anpassa och överföra data från en föräldrakomponent till en barnkomponent. Denna funktion gör det möjligt att skapa återanvändbara och flexibla komponenter inom applikationen.

Skicka props

Föreställ dig att vi bygger en webbutik.

I detta scenario har vi en huvudkomponent som heter App, och vi vill visa produktinformation med hjälp av en Product-komponent. Vi kan skicka produktnamn och pris som props från App till Product.

Så här görs det i praktiken:

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

I App-komponenten inkluderar vi Product-komponenten och skickar med props: name med värdet "Green iguana" och price med värdet 579.

Ta emot och använda props

Nu tittar vi på Product-komponenten, som tar emot dessa props:

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

I Product-komponenten definierar vi den så att den accepterar ett argument som kallas props. Inuti komponenten kan vi komma åt värdena för dessa props med punktnotation (.) följt av egenskapsnamnet (t.ex. props.name och props.price).

Praktisk användning

Med detta tillvägagångssätt har vi skapat en Product-komponent som kan återanvändas med olika produktinformation flera gånger. Vi kan enkelt anpassa textinnehållet för varje Product-komponent genom att ange olika props.

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

Nu har vi flexibilitet att visa olika produktdetaljer med samma Product-komponent.

Fullständig appkod: