Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Що таке "Slot Pattern"?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**Slot Pattern** - це архітектурний прийом, при якому компонент визначає слоти (місця вставки контенту), а батьківський код передає JSX для кожного слоту через спеціальні пропси. **Ключове:** компонент створює структуру, а користувач заповнює її вмістом - головна фраза патерна: "я визначаю *де*, ти вирішуєш *що*".Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)Зображення## Визначення > **Slot Pattern** - це архітектурний прийом, при якому компонент визначає **слоти (місця вставки контенту)**, > а батьківський код передає JSX для кожного слоту через **спеціальні пропси**. Іншими словами: > Компонент створює структуру, > а користувач заповнює її вмістом. --- ## Приклад (інтуїтивно) Припустимо, у нас є **модальне вікно**. Воно завжди складається з: - заголовка, - вмісту, - підвалу (з кнопками). Якщо ми жорстко пропишемо все всередині компонента, його не можна буде повторно використовувати. Рішення - використовувати "слоти". --- ## Реалізація Slot Pattern ```javascript function Modal({ header, body, footer }) { return ( <div className="modal"> <div className="modal-header">{header}</div> <div className="modal-body">{body}</div> <div className="modal-footer">{footer}</div> </div> ); } // Використання <Modal header={<h2>Видалити акаунт?</h2>} body={<p>Цю дію не можна скасувати.</p>} footer={<button>Так, видалити</button>} /> ``` > Компонент `Modal` визначає **структуру**, > а зовнішній код вставляє контент у "слоти": `header`, `body`, `footer`. Це і є **Slot Pattern**. --- ## Чому це корисно | Проблема | Як вирішує Slot Pattern | |---|---| | Компонент має бути гнучким | Дозволяє вставляти різні частини контенту | | Потрібно зберегти структуру | Компонент задає каркас, користувач заповнює | | Потрібно контролювати стилі і макет | Верстка фіксується всередині, контент змінюється зовні | | Не можна використати `children` для кількох областей | Кожен слот - окремий `prop` | --- ## Приклад: картка з кількома слотами ```javascript function Card({ image, title, description, actions }) { return ( <div className="card"> <div className="card-image">{image}</div> <div className="card-content"> <h3>{title}</h3> <p>{description}</p> </div> <div className="card-actions">{actions}</div> </div> ); } // Використання: <Card image={<img src="/shirt.jpg" alt="Shirt" />} title="Лляна сорочка" description="100% льон, Італія" actions={<button>Додати в кошик</button>} /> ``` > Компонент `Card` гарантує єдиний макет, > але **контент слотів повністю керується ззовні.** --- ## Альтернатива: React children API Якщо потрібно більше контролю, можна дозволити передавати дочірні елементи з "мітками": ```javascript function Card({ children }) { const slots = React.Children.toArray(children); const image = slots.find(c => c.type === Card.Image); const actions = slots.find(c => c.type === Card.Actions); const content = slots.find(c => c.type === Card.Content); return ( <div className="card"> <div>{image}</div> <div>{content}</div> <div>{actions}</div> </div> ); } Card.Image = ({ children }) => <>{children}</>; Card.Content = ({ children }) => <>{children}</>; Card.Actions = ({ children }) => <>{children}</>; // Використання: <Card> <Card.Image><img src="/shirt.jpg" /></Card.Image> <Card.Content><h3>Лляна сорочка</h3></Card.Content> <Card.Actions><button>Купити</button></Card.Actions> </Card> ``` > Це вже **Slot Pattern + Compound Components**, > де кожна частина визначається "іменованим підкомпонентом". --- ## Де використовується Slot Pattern | Область | Приклад | |---|---| | Layout-компоненти | `<Page header={...} sidebar={...} content={...} />` | | UI-бібліотеки | `Modal`, `Dialog`, `Card`, `Tooltip`, `Dropdown` | | Design Systems | Фіксована структура з налаштовуваними слотами | | Compound Components | Як спосіб іменувати різні області контенту | --- ## Порівняння з іншими патернами | Патерн | Що робить | Відмінність | |---|---|---| | **Children** | Передає один шматок JSX всередину | Лише один "слот" | | **Slot Pattern** | Кілька "іменованих" місць для вставки | Гнучкіший, ніж `children` | | **Compound Components** | Вкладені компоненти, пов'язані логікою | Slot Pattern - структурний, Compound - поведінковий | | **Render Props / Function as Child** | Діляться даними через функцію | Slot Pattern не про дані, а про структуру UI | --- ## Підсумок | Що | Опис | |---|---| | Ідея | Компонент задає "слоти", користувач вставляє контент | | Реалізація | Через props (`header`, `footer`, `actions`) або підкомпоненти | | Мета | Розділити структуру і вміст, зберегти гнучкість | | Приклад | `<Modal header={...} body={...} footer={...} />` | | Застосування | Layouts, Cards, Dialogs, Compound UI | | Ключова фраза | "Я визначаю *де*, ти вирішуєш *що*" | --- > **Головна думка:** > Slot Pattern - це спосіб дати користувачу **гнучкість наповнення** компонентів, > зберігаючи **контроль над структурою** і **єдиний стиль**. > > Компонент каже: "ось мої місця - header, body, footer", > а ти вирішуєш, *що покласти в кожне з них.*Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.