将道具传递给组件时输入错误

Question

你好，我有一种类似这样的类型：

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组件是在一个map函数中呈现的，这就是类型记录的抱怨所在。

​

​

我做错什么了？

Answer 1

您已经定义了您的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>
    );
}