Видеоуроки, интерактивный редактор и сохранение прогресса — бесплатно, сразу после входа.
ВойтиСоздать аккаунт — бесплатноВ этом задании мы добавим блок, в котором UserBadge рендерится уже вне провайдера, и увидим, что он получает значение по умолчанию из createContext.
Сейчас бейдж пользователя один и он всегда внутри UserContext.Provider — получает объект из и показывает имя. Если же компонент, который вызывает , окажется любого соответствующего провайдера, он получит то значение, которое было передано в при создании контекста — это . В нашем случае контекст создан так:
uservalueuseContext(UserContext)createContextЗначит, снаружи провайдера потребитель получит { user: null }. В UserBadge мы уже обрабатываем отсутствие пользователя и показываем «Гость» и amber-точку — для этого и нужен осмысленный defaultValue.
Чтобы увидеть разницу, достаточно вынести один блок с UserBadge за пределы провайдера: например, оставить шапку внутри провайдера, а ниже добавить ещё один блок (без обёртки в провайдер), в котором снова рендерится UserBadge. В шапке будет имя пользователя, во втором блоке — «Гость».
Добавь ниже текущего блока с шапкой второй блок, в котором рендерится UserBadge, но уже вне UserContext.Provider (например, вторым ребёнком в container). В этом блоке бейдж должен показывать «Гость», потому что он получит defaultValue контекста — { user: null }.