Obsah mezi tagy

Rámečky na stránce festivalu mají všechny stejný vzhled: bílé pozadí, zakulacené rohy a stín. Mají ho karty kapel a stejně mají vypadat i vstupenky. Místo toho, abyste všude znovu psali stejný div se stejnou třídou, můžete udělat komponentu, která je jen rámeček, a vložit do ní cokoli, stejně jako vkládáte text a prvky mezi tagy div:

<Karta>
    <h3>Kemp</h3>
    <p>Kemp se otevírá v pátek.</p>
</Karta>

Co je mezi otevíracím a zavíracím tagem komponenty, předá jí React jako prop se zvláštním názvem: children (anglicky děti, tedy vnořený obsah). Komponenta ho dá tam, kam potřebuje:

export default function Karta({ children }) {
    return <div className="karta">{children}</div>;
}

Stránka pak dostane tohle:

<div class="karta">
    <h3>Kemp</h3>
    <p>Kemp se otevírá v pátek.</p>
</div>

children může být cokoli, co jde napsat v JSX: text, prvky, další komponenty. A komponenta může brát children spolu s dalšími props. <Karta nadpis="Kemp">…</Karta> dostane nadpis i children.

Takové komponenty, které svému obsahu dávají jen rámeček nebo rozvržení, jsou v aplikacích v Reactu běžné: karta, dialog, oddíl stránky s nadpisem. Jedna komponenta rozhoduje, jak rámeček vypadá, a zbytek aplikace ho plní.