Выбор ответа Middle Паттерны компонентов обновлено
Как compound-компоненты делят состояние
Вопрос
В API <Tabs><Tabs.Tab value="a" /><Tabs.Panel value="a" /></Tabs> как Tabs.Tab узнаёт, какая вкладка активна, если пользователь может вкладывать вкладки в любые обёртки?
Попробуйте сами
Выберите вариант, и откроется разбор.
Показать ответ и разбор
Коротко
Правильный ответ: Tabs хранит активное значение и отдаёт его через Context. Context доставляет значение на любую глубину, поэтому пользователь свободен в разметке.
Варианты ответа
TabsперебираетchildrenчерезReact.Children.mapи клонирует сactiveTabsхранит активное значение и отдаёт его через Contextправильный ответ- Каждая вкладка хранит своё состояние и синхронизирует его через
useEffect - Через переменную модуля, которую
Tabsобновляет при клике
Разбор
Context доставляет значение на любую глубину, поэтому пользователь свободен в разметке. Так сделаны Radix, Headless UI и другие библиотеки.
Children.mapиcloneElementвидят только прямых детей: стоит обернутьTabвdiv, и пропс не дойдёт. Подход хрупкий и устаревший.- Синхронизация через эффекты даёт лишние рендеры и рассинхрон.
- Глобальная переменная сломается при двух
Tabsна странице.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.