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

Что такое составные компоненты (compound components)?

MiddleReact
Ещё спрашивают так:
  • Как сделать компонент вроде <Tabs><Tabs.Tab/></Tabs>?
Коротко

Набор компонентов, которые работают вместе и делят общее состояние через Context родителя: <Tabs>, <Tabs.List>, <Tabs.Tab>, <Tabs.Panel>. Пользователь сам собирает разметку в нужном порядке, а логика (какая вкладка активна, клавиатура, aria-атрибуты) спрятана внутри. Это гибче, чем один компонент с десятком props.

  • Дочерние части без родителя должны выдавать понятную ошибку
  • Так устроены библиотеки Radix, Headless UI
  • Значение контекста мемоизируют

А ещё Альтернатива — передача конфигурации массивом, но она хуже расширяется

Подробно

const TabsCtx = createContext<{active: string; set: (v: string) => void} | null>(null);
function Tabs({ children, initial }) {
  const [active, set] = useState(initial);
  const value = useMemo(() => ({ active, set }), [active]);
  return <TabsCtx.Provider value={value}>{children}</TabsCtx.Provider>;
}
function Tab({ id, children }) {
  const ctx = useContext(TabsCtx)!;
  return <button aria-selected={ctx.active === id} onClick={() => ctx.set(id)}>{children}</button>;
}

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

  • Общий контекст родителя.
  • Гибкая сборка разметки пользователем.
  • Скрытая логика и доступность.

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

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

Показать варианты и ответ
  • ✗Это компоненты, наследующие один базовый класс
  • ✗Компонент с одним большим объектом конфигурации, который описывает всю разметку целиком
  • ✗Составные компоненты требуют Redux
  • ✓Компоненты делят состояние родителя через Context и собираются в нужную разметку

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

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

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

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

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