У меня есть компонент Navbar
, внутри которого я создаю компонент NavDropdown
для использования внутри панели навигации. Я хочу передать массив в качестве реквизита компоненту NavDropdown
, чтобы отобразить его выпадающие элементы.
Массив будет иметь структуру:
DropDownItems: [
{
title: "Keywords",
to: "/app/keywords",
},
{
title: "Followers",
to: "/app/followers",
},
{
title: "Following",
to: "/app/following",
},
]
Однако я получаю следующие 2 ошибки:
Navbar.tsx
type SubItemsProps = {
subItems: DropdownItem[]
}
interface DropdownItem {
subTitle: string,
subLink: string
}
const NavDropdown = ({
title,
subItems
}: {
title: string;
subItems: SubItemsProps;
}) => {
return (
<div>
<div>{title}</div>
<div>
<ul>
{subItems.map(subItem => (
<Link href = {subItem.subLink}>
<li>
<span>
{subItem.subTitle}
</span>
</li>
</Link>
))}
</ul>
</div>
</div>
);
};
/* Navbar component */
просто отредактируйте:
type SubItemsProps = DropdownItem[]
Возможно, вы сможете решить проблему следующим образом:
{subItems.subItems.map(subItem => (
<Link href = {subItem.subLink}>
<li>
<span>
{subItem.subTitle}
</span>
</li>
</Link>
))}
Тип, который вы определили, имеет массив в качестве атрибута. Вот почему вам нужно обратиться к атрибуту, чтобы получить массив.
type SubItemsProps = {
subItems: DropdownItem[]
}