我很抱歉問，但我將如何在下面的示例中使用打字稿。經過一個小時的嘗試，感謝您的幫助！
下面的映射函式使用 sortOptions，我嘗試在宣告 const SortOptionsProps 中使用 Typescript 定義它們。因此，我很想弄清楚如何將 SortOptionsProps 傳遞給export default function Layout()下面。
import { Menu } from '@headlessui/react'
declare const SortOptionsProps: {
name: string
href: string
}[]
const sortOptions = [
{ name: 'Most Popular', href: '#' },
{ name: 'Best Rating', href: '#' },
{ name: 'Newest', href: '#' },
{ name: 'Price: Low to High', href: '#' },
{ name: 'Price: High to Low', href: '#' },
]
export default function Layout() {
return (
<>
{sortOptions.map((option) => (
<Menu.Item key={option}>
{({ active }) => (
<a
href={option.href}
className={classNames(
active
? 'bg-gray-100'
: '',
'block px-4 py-2 text-sm font-medium text-gray-900'
)}
>
{option.name}
</a>
)}
</Menu.Item>
))}
</>
)
}
uj5u.com熱心網友回復：
type SortOption = { name: string; href: string }:
const sortOptions: SortOption[] = [
{ name: 'Most Popular', href: '#' },
{ name: 'Best Rating', href: '#' },
{ name: 'Newest', href: '#' },
{ name: 'Price: Low to High', href: '#' },
{ name: 'Price: High to Low', href: '#' },
]
如果您愿意，也可以使用interface代替type。
interface SortOption { name: string; href: string }
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/368195.html
下一篇：呈現特定JSON屬性的問題