React: Jak przekazać komponent do innego komponentu?

Jak przekazać komponent do innego komponentu?

React pozwala na przekazywanie komponentu lub komponentów do już istniejącego.

Żeby przekazać komponent do innego komponentu, korzystamy ze specjalnej właściwości o nazwie children. Wykorzystujemy ją w komponencie nadrzędnym:

function Component1({ label, children }) {
    return (
        <div>
            <h2>{label}</h2>
            {children}
        </div>
    );
}

function Component2({ text }) {
    return <p>{text}</p>;
}

Następnie za pomocą składni JSX piszemy:

<Component1 label="Section 1">
    <Component2 text="Lorem ipsum..." />
</Component1>

Wyrenderuje:

<div>
    <h2>Section 1</h2>
    <p>Lorem ipsum...</p>
</div>

Możemy przekazać więcej niż jeden komponent:

<Component1 label="Section 1">
    <Component2 text="Lorem ipsum..." />
    <Component2 text="Etiam vel varius mi" />
    <Component2 text="Nullam metus orci" />
</Component1>