В React не наследуют компоненты — их составляют.
function Card({ title, actions, children }) {
return (
<section className="card">
<header>{title}{actions}</header>
{children}
</section>
);
}
<Card title="Корзина" actions={<ClearButton />}>
<CartItems />
</Card>Что важно знать
- children и именованные «слоты» через props — основной способ строить обёртки: модальные окна, раскладки, карточки.
- Композиция решает «проброс props через пять уровней» чаще, чем контекст.
- Render props (
<List renderItem={…}/>) и HOC (withAuth(Component)) — старые приёмы переиспользования логики; сейчас их почти везде заменили пользовательские хуки, но в старом коде и библиотеках они встречаются. - Составные компоненты (
<Tabs><Tabs.List/><Tabs.Panel/></Tabs>) с общим контекстом — паттерн UI-библиотек.