Children Prop

Was ist children?

Wann immer du eine Komponente mit Öffnungs- und Schluss-Tag verwendest, wird der dazwischen liegende Inhalt automatisch als Prop mit dem Namen children an die Komponente übergeben.

<Card>
    <h1>Titel</h1>
    <p>Beschreibung</p>
</Card>

Die Card-Komponente erhält in props.children alles, was zwischen <Card> und </Card> steht.

Eine simple Wrapper-Komponente

function Card({ children }) {
    return <div className="card">{children}</div>;
}

Card ist jetzt ein generischer Container: Sie weiß nicht, was sie rendert – sie reicht den Inhalt nur durch und stylt ihn drumherum.

function App() {
    return (
        <main>
            <Card>
                <h2>Profil</h2>
                <p>Anna, 30 Jahre</p>
            </Card>

            <Card>
                <button>Aktion</button>
            </Card>
        </main>
    );
}

Vorteil: Card ist beliebig wiederverwendbar, ohne dass für jeden Inhalt eine eigene Variante nötig wäre.

Was darf children enthalten?

So gut wie alles: einzelne Elemente, mehrere Elemente, Strings, Zahlen, Arrays, Komponenten, sogar null oder undefined. React kümmert sich um das Rendern.

<Box>Einfacher Text</Box>
<Box>{42}</Box>
<Box><Avatar /></Box>
<Box>
    <h1>Titel</h1>
    <p>Mehrzeilig</p>
</Box>
<Box>{items.map((item) => <Item key={item.id} {...item} />)}</Box>
<Box>{isLoggedIn && <Logout />}</Box>

null, undefined, false und true werden von React nicht gerendert – das ist die Grundlage für condition && <Element />-Muster.

Häufige Use Cases

Layout-Komponenten

Layouts sind die klassische Anwendung. Sie definieren Struktur, Padding, Hintergründe – ohne den Inhalt zu kennen.

function PageLayout({ children }) {
    return (
        <div className="layout">
            <Header />
            <main>{children}</main>
            <Footer />
        </div>
    );
}

Bedingte Rahmen

Ein Wrapper, der nur unter Umständen rendert:

function ProtectedRoute({ children }) {
    const { isAuthenticated } = useAuth();
    if (!isAuthenticated) return <Navigate to="/login" />;
    return <>{children}</>;
}

Modal- und Dialog-Container

Modals sind ohne children praktisch unmöglich elegant zu bauen:

function Modal({ open, onClose, children }) {
    if (!open) return null;
    return (
        <div className="overlay" onClick={onClose}>
            <div className="dialog" onClick={(e) => e.stopPropagation()}>
                {children}
            </div>
        </div>
    );
}

Mehrere „Slots" über benannte Props

children kennt nur einen Inhaltsbereich. Manchmal braucht man mehrere – etwa Header, Body und Footer für eine Card. Die übliche Lösung: zusätzliche Props vom Typ ReactNode.

function Card({ header, body, footer }) {
    return (
        <div className="card">
            <div className="card-header">{header}</div>
            <div className="card-body">{body}</div>
            <div className="card-footer">{footer}</div>
        </div>
    );
}

// Verwendung
<Card
    header={<h2>Profil</h2>}
    body={<p>Anna, 30</p>}
    footer={<button>Bearbeiten</button>}
/>

Das ist React-typisch und kommt ohne zusätzliche API aus. Wer es eleganter will, schaut sich später Compound Components an.

TypeScript: Korrekte Typen für children

In TypeScript-Projekten lautet der idiomatische Typ heute React.ReactNode. Er erlaubt alles, was React rendern kann.

type CardProps = {
    children: React.ReactNode;
};

export function Card({ children }: CardProps) {
    return <div className="card">{children}</div>;
}

Der frühere Typ React.FC<Props> (Function Component) ist heute nicht mehr empfohlen. Er erzwang implizit children, brachte aber in TypeScript 4.x Probleme – die Direkt-Variante mit explizitem Typ ist klarer.

Weiterführende Ressourcen

Externe Quellen

• Passing JSX as children – react.dev

Verwandte Artikel

• Props
• Composition statt Inheritance
• Fragments
• Render Props
• Compound Components