React Typescript 101：如何为常量列表和Layout函数定义对应类型

修正方案 #

1. 调整类型定义
   你之前用declare const SortOptionsProps是声明全局常量的语法，不符合定义类型的需求，调整为如下写法即可保留你原定的类型命名：

// 定义排序选项的数组类型，和你原本的结构一致
type SortOptionsProps = {
  name: string
  href: string
}[]
// 定义Layout组件的入参类型
type LayoutProps = {
  sortOptions: SortOptionsProps
}

2. 组件逻辑调整
   给Layout绑定Props类型，将sortOptions改为从组件入参接收，同时修复原有代码中key绑定对象的错误（React的key需要是字符串/数字这类基础类型），可选设置默认排序选项，不传参时默认使用：

import { Menu } from '@headlessui/react'

// 通用默认排序选项，可单独导出复用
const defaultSortOptions: SortOptionsProps = [
  { 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({ sortOptions = defaultSortOptions }: LayoutProps) {
  // 注意这里修复了key的赋值，改用唯一的name属性作为key
  return (
    <>
      {sortOptions.map((option) => (
        <Menu.Item key={option.name}>
          {({ 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>
      ))}      
    </>
  )
}

3. 组件调用方式

// 不传参数，默认使用内置排序选项
<Layout />

// 传入自定义的排序选项
<Layout sortOptions={[
  { name: '最新上线', href: '/newest' },
  { name: '销量优先', href: '/sales' }
]} />

补充说明 #

如果你的代码中没有导入classNames工具函数，可直接改用模板字符串拼接类名，避免报错：

className={`${active ? 'bg-gray-100' : ''} block px-4 py-2 text-sm font-medium text-gray-900`}

内容的提问来源于stack exchange，提问作者ajkdfjkadfjk