{"type":"doc","content":[{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"⚛️ Определение"}]},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Slot Pattern"},{"type":"text","text":" — это архитектурный приём, при котором компонент определяет "},{"type":"text","marks":[{"type":"bold"}],"text":"слоты (места вставки контента)"},{"type":"text","text":","},{"type":"hardBreak"},{"type":"text","text":"а родительский код передаёт JSX для каждого слота через "},{"type":"text","marks":[{"type":"bold"}],"text":"специальные пропсы"},{"type":"text","text":"."}]}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"📦 Иными словами:"}]},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Компонент создаёт структуру,"},{"type":"hardBreak"},{"type":"text","text":"а пользователь заполняет её содержимым."}]}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"🧱 Пример (интуитивно)"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Допустим, у нас есть "},{"type":"text","marks":[{"type":"bold"}],"text":"модальное окно"},{"type":"text","text":"."},{"type":"hardBreak"},{"type":"text","text":"Оно всегда состоит из:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"заголовка,"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"содержимого,"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"подвала (с кнопками)."}]}]}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Если мы жёстко пропишем всё внутри компонента — его нельзя будет переиспользовать."},{"type":"hardBreak"},{"type":"text","text":"Решение — использовать “слоты” 👇"}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"✅ Реализация Slot Pattern"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"function Modal({ header, body, footer }) {\n return (\n

{header}

{body}

{footer}

\n );\n}\n\n// Использование\nУдалить аккаунт?}\n body={

Это действие нельзя отменить.

}\n footer={}\n/>\n"}]},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"🔹 Компонент "},{"type":"text","marks":[{"type":"code"}],"text":"Modal"},{"type":"text","text":" определяет "},{"type":"text","marks":[{"type":"bold"}],"text":"структуру"},{"type":"text","text":","},{"type":"hardBreak"},{"type":"text","text":"🔹 А внешний код вставляет контент в “слоты”: "},{"type":"text","marks":[{"type":"code"}],"text":"header"},{"type":"text","text":", "},{"type":"text","marks":[{"type":"code"}],"text":"body"},{"type":"text","text":", "},{"type":"text","marks":[{"type":"code"}],"text":"footer"},{"type":"text","text":"."}]}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Это и есть "},{"type":"text","marks":[{"type":"bold"}],"text":"Slot Pattern"},{"type":"text","text":"."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"🧩 Почему это полезно"}]},{"type":"table","content":[{"type":"tableRow","content":[{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Проблема"}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Как решает Slot Pattern"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Компонент должен быть гибким"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Позволяет вставлять разные части контента"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Нужно сохранить структуру"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Компонент задаёт каркас, пользователь заполняет"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Нужно контролировать стили и макет"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Вёрстка фиксируется внутри, контент меняется снаружи"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Нельзя использовать "},{"type":"text","marks":[{"type":"code"}],"text":"children"},{"type":"text","text":" для нескольких областей"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Каждый слот — отдельный "},{"type":"text","marks":[{"type":"code"}],"text":"prop"}]}]}]}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"⚙️ Пример: карточка с несколькими слотами"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"function Card({ image, title, description, actions }) {\n return (\n

{image}

{title}

{description}

{actions}

\n );\n}\n\n// Использование:\n}\n title=\"Льняная рубашка\"\n description=\"100% лен, Италия\"\n actions={}\n/>\n"}]},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Компонент "},{"type":"text","marks":[{"type":"code"}],"text":"Card"},{"type":"text","text":" гарантирует единый макет,"},{"type":"hardBreak"},{"type":"text","text":"но "},{"type":"text","marks":[{"type":"bold"}],"text":"контент слотов полностью управляется извне."}]}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"🧠 Альтернатива: React children API"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Если нужно больше контроля, можно позволить передавать дочерние элементы с “метками”:"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"function Card({ children }) {\n const slots = React.Children.toArray(children);\n const image = slots.find(c => c.type === Card.Image);\n const actions = slots.find(c => c.type === Card.Actions);\n const content = slots.find(c => c.type === Card.Content);\n\n return (\n

{image}

{content}

{actions}

\n );\n}\n\nCard.Image = ({ children }) => <>{children};\nCard.Content = ({ children }) => <>{children};\nCard.Actions = ({ children }) => <>{children};\n\n// Использование:\n\n

Льняная рубашка

\n \n\n"}]},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Это уже "},{"type":"text","marks":[{"type":"bold"}],"text":"Slot Pattern + Compound Components"},{"type":"text","text":","},{"type":"hardBreak"},{"type":"text","text":"где каждая часть определяется “именованным подкомпонентом”."}]}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"🎨 Где используется Slot Pattern"}]},{"type":"table","content":[{"type":"tableRow","content":[{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Область"}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Пример"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Layout-компоненты"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":""}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"UI-библиотеки"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"Modal"},{"type":"text","text":", "},{"type":"text","marks":[{"type":"code"}],"text":"Dialog"},{"type":"text","text":", "},{"type":"text","marks":[{"type":"code"}],"text":"Card"},{"type":"text","text":", "},{"type":"text","marks":[{"type":"code"}],"text":"Tooltip"},{"type":"text","text":", "},{"type":"text","marks":[{"type":"code"}],"text":"Dropdown"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Design Systems"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Фиксированная структура с настраиваемыми слотами"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Compound Components"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Как способ именовать разные области контента"}]}]}]}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"📚 Сравнение с другими паттернами"}]},{"type":"table","content":[{"type":"tableRow","content":[{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Паттерн"}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Что делает"}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Отличие"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Children"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Передаёт один кусок JSX внутрь"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Только один “слот”"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Slot Pattern"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Несколько “именованных” мест для вставки"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Гибче, чем "},{"type":"text","marks":[{"type":"code"}],"text":"children"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Compound Components"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Вложенные компоненты, связанные логикой"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Slot Pattern — структурный, Compound — поведенческий"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Render Props / Function as Child"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Делятся данными через функцию"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Slot Pattern не про данные, а про структуру UI"}]}]}]}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"🧭 Итог"}]},{"type":"table","content":[{"type":"tableRow","content":[{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Что"}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Описание"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"💡 Идея"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Компонент задаёт “слоты”, пользователь вставляет контент"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"⚙️ Реализация"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Через props ("},{"type":"text","marks":[{"type":"code"}],"text":"header"},{"type":"text","text":", "},{"type":"text","marks":[{"type":"code"}],"text":"footer"},{"type":"text","text":", "},{"type":"text","marks":[{"type":"code"}],"text":"actions"},{"type":"text","text":") или подкомпоненты"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"🎯 Цель"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Разделить структуру и содержимое, сохранить гибкость"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"🧱 Пример"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":""}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"🚀 Применение"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Layouts, Cards, Dialogs, Compound UI"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"💬 Ключевая фраза"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"“Я определяю "},{"type":"text","marks":[{"type":"italic"}],"text":"где"},{"type":"text","text":", ты решаешь "},{"type":"text","marks":[{"type":"italic"}],"text":"что"},{"type":"text","text":"”"}]}]}]}]},{"type":"horizontalRule"},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"💬 "},{"type":"text","marks":[{"type":"bold"}],"text":"Главная мысль:"},{"type":"hardBreak"},{"type":"text","text":"Slot Pattern — это способ дать пользователю "},{"type":"text","marks":[{"type":"bold"}],"text":"гибкость наполнения"},{"type":"text","text":" компонентов,"},{"type":"hardBreak"},{"type":"text","text":"сохраняя "},{"type":"text","marks":[{"type":"bold"}],"text":"контроль над структурой"},{"type":"text","text":" и "},{"type":"text","marks":[{"type":"bold"}],"text":"единый стиль"},{"type":"text","text":"."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Компонент говорит: “вот мои места — header, body, footer”,"},{"type":"hardBreak"},{"type":"text","text":"а ты решаешь, "},{"type":"text","marks":[{"type":"italic"}],"text":"что положить в каждый из них."}]}]},{"type":"paragraph","attrs":{"textAlign":null}}]}

Что такое “Slot Pattern”?

Комментарии