Я получаю следующее предупреждение в консоли JavaScript каждый раз, когда открываю компонент Sheet.
Внимание: для {DialogContent} отсутствует
Description
илиaria-describedby = {undefined}
.
Я в замешательстве, потому что я не использую какие-либо компоненты Dialog на своем листе. Так почему же это происходит и как мне избавиться от этого предупреждения? Вот мой соответствующий код для компонента Sheet:
<Sheet open = {openMenu} onOpenChange = {setOpenMenu}>
<SheetTrigger asChild>
<Button variant = "ghost">
<MenuIcon color = {location.pathname === "/" ? "white" : "black"} size = "2em" />
</Button>
</SheetTrigger>
<SheetContent side = "right" className = "fixed z-50">
<div >
<p>Sheet Content</p>
</div>
</SheetContent>
</Sheet>
Компонент Shadcn Sheet является расширением компонента Dialog, поэтому <SheetContent>
требует <SheetDescription>
так же, как и обычный компонент Dialog. Просто добавьте описание листа под его содержимым, и ошибка исчезнет.
<SheetContent side = "right">
<SheetHeader>
<SheetDescription>Description goes here</SheetDescription>
</SheetHeader>
</SheetContent>
Если вы не хотите, чтобы описание отображалось в вашем приложении, используйте компонент radixUI VisuallyHidden следующим образом:
<SheetDescription>
<VisuallyHidden.Root>
Description goes here
</VisuallyHidden.Root>
</SheetDescription>
Если вы предпочитаете не отображать описание, вы можете просто отобразить его следующим образом:
<SheetHeader>
<SheetDescription />
</SheetHeader>