Вопрос с собеседования · Frontend

Как строить обёртки через children и слоты?

JuniorReact
Ещё спрашивают так:
  • Что такое props.children?
Коротко

Всё, что вложено в компонент между тегами, приходит в props.children — так делают обёртки: модальное окно, карточку, раскладку страницы, не зная, что внутри. Если мест для содержимого несколько, передают их отдельными props-слотами (header, footer, actions), куда кладут JSX. Композиция заменяет наследование и снижает prop drilling: вложенным компонентам данные передаются прямо там, где их создают.

  • children может быть строкой, элементом, массивом или функцией
  • Тип в TypeScript — React.ReactNode
  • Раскладки в маршрутизаторе — тот же приём (Outlet)

А ещё React рекомендует композицию, а не наследование компонентов

Подробно

function Card({ title, actions, children }: { title: string; actions?: ReactNode; children: ReactNode }) {
  return (<section className="card"><h3>{title}</h3>{children}<footer>{actions}</footer></section>);
}
<Card title="Заказ" actions={<button>Оплатить</button>}><OrderItems /></Card>

Что хотят услышать

  • props.children для обёрток.
  • Несколько слотов через props.
  • Композиция вместо наследования.

Проверьте себя

Один верный вариант. Подумайте, потом откройте ответ.

Показать варианты и ответ
  • ✗Чтобы сделать обёртку, нужно наследовать класс компонента
  • ✓Вложенное приходит в props.children, а несколько мест — отдельными props-слотами с JSX
  • ✗В props можно передавать только строки, числа и функции, а JSX — исключительно через children
  • ✗children доступен только в классовых компонентах

Связанные вопросы

Партнёр платформы

Разбор собеседования с sotto

После собеседования sotto разбирает разговор: оценка, каждый вопрос — хорошо, частично или слабо, чего не хватило в ответе и над чем поработать к следующему разу. Первые 30 минут бесплатно.

Разбор собеседования