你好我有一個看起來像這樣的型別：
type MenuItemType = { name: string; link: string };
還有這些型別的陣列：
const menuItems: MenuItemType[] = [
{ name: "FAQ", link: "/faq" },
{ name: "Terms of use", link: "/terms" },
{ name: "Cookie policy", link: "/cookie-policy" },
{ name: "Privacy policy", link: "/privacy-policy" },
{ name: "Subscription", link: "/subscription" },
];
還有一個組件，它采用一些相同型別的道具：
function ListItem({ name, link }: MenuItemType) {
return (
<li className="text-xs mr-14 last:mr-0">
<Link href={link}>
<a>{name}</a>
</Link>
</li>
);
}
ListItem 組件在地圖函式中呈現，這就是打字稿抱怨的地方。
我究竟做錯了什么？
uj5u.com熱心網友回復：
您已經定義了 ListItem 組件，因此它需要名稱和鏈接的單獨道具，而不是專案的組合道具。所以如果 ListItem 是正確的，你會像這樣使用它：
<ListItem name={item.name} link={item.link} />
// or:
<ListItem {...item} />
或者，如果您想傳入單個專案道具，請將 ListItem 重寫為：
function ListItem({ item }: { item: MenuItemType }) {
return (
<li className="text-xs mr-14 last:mr-0">
<Link href={item.link}>
<a>{item.name}</a>
</Link>
</li>
);
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/407771.html
標籤：