Що таке "Slot Pattern"?

ReactJunior~2 хв читання

Визначення

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", а ти вирішуєш, що покласти в кожне з них.

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.