如何用TypeScript实现支持动态键值对的通用React下拉组件

我现有一个接收键值对的自定义React下拉组件，原本仅支持符合People接口的数据结构：

export interface People {
  id: number | string;
  name: string;
}

组件使用方式如下：

<Dropdown
  dataList={people}
  value={values.person}
/>

组件内部固定通过id和name字段渲染列表项：

<ListItem id={person.id}>{ person.name }</ListItem>

现在有一组地点数据需要渲染，结构如下：

[
 {
   placeId: 1,
   placeName: 'Paris',
   country: 'France'
 },
 {
   placeId: 2,
   placeName: 'Barcelona',
   country: 'Spain'
 }
]

目前我只能先将这组数据转换为{id, name}格式的数组再传入组件，选择后还需转换回去。想问能否改造组件，使其无需转换数据即可直接支持任意结构的项？比如直接取数据项的前两个属性进行渲染？

解决方案：通过字段映射实现通用适配 #

直接取数据项前两个属性的做法并不靠谱——属性顺序在JS对象中并非绝对稳定（比如数字属性会被自动排序），且后续数据结构变更极易引发隐性bug。更稳妥的方案是给组件添加自定义字段映射参数，让使用者指定标识字段和显示文本字段，彻底实现组件的通用性。

1. 改造组件的TypeScript类型与实现 #

将组件改为泛型组件，同时新增idField和displayField两个可选props，默认值沿用原有的id和name：

import React from 'react';

interface DropdownProps<T> {
  dataList: T[];
  value: T | null;
  idField?: keyof T; // 指定作为唯一标识的字段
  displayField?: keyof T; // 指定作为显示文本的字段
  onChange?: (selectedItem: T) => void;
  // 其他原有props...
}

export function Dropdown<T extends Record<string, any>>({
  dataList,
  value,
  idField = 'id',
  displayField = 'name',
  onChange
}: DropdownProps<T>) {
  return (
    <div className="dropdown-container">
      {/* 省略下拉触发按钮等原有逻辑 */}
      <div className="dropdown-options">
        {dataList.map(item => (
          <ListItem
            key={item[idField]}
            id={item[idField]}
            onClick={() => onChange?.(item)}
            active={value?.[idField] === item[idField]}
          >
            {item[displayField]}
          </ListItem>
        ))}
      </div>
    </div>
  );
}

2. 适配不同结构的数据 #

• 对于原有People数据，无需额外配置，直接使用默认值：

<Dropdown<People>
  dataList={people}
  value={values.person}
  onChange={(selected) => console.log(selected)}
/>

• 对于地点数据，仅需传入对应的字段名即可：

interface Place {
  placeId: number;
  placeName: string;
  country: string;
}

<Dropdown<Place>
  dataList={places}
  value={selectedPlace}
  idField="placeId"
  displayField="placeName"
  onChange={(selected) => console.log(selected)}
/>

为什么不推荐“取前两个属性”？ #

1. 属性顺序不可靠：JS对象的属性顺序存在特殊规则（如数字键优先排序），无法保证前两个属性始终是你需要的字段；
2. 可维护性差：其他开发者接手时无法理解“取前两个属性”的逻辑，后续数据结构变更极易引发bug；
3. 灵活性不足：如果需要用非前两个属性作为显示文本或标识，这种方案完全无法满足需求。

通过字段映射实现的通用组件，既保留了灵活性，又保证了代码的可读性和稳定性，是通用UI组件的标准设计思路。

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