Generic Components 泛型组件
最后更新：2026-10-28
Generic Components 泛型组件
泛型组件让类型跟着数据走：function List<T> 渲染字符串数组时 T=string，渲染对象数组时 T=User。一次编写，任何元素类型都获得完整类型推导与提示，是通用 UI 库与数据层封装的核心技巧。
| 分组 | 数据与工程化 |
|---|---|
| 类型 | 模式 |
ℹ️ 说明 编辑器将 JSX 转译为 JavaScript 后在沙箱中渲染真实界面；组件自动挂载，无需手写 render 调用。
📝 语法
type ListProps<T> = {
items: T[]
renderItem: (item: T) => React.ReactNode // 调用方决定怎么渲染
keyOf?: (item: T) => string | number
}
function List<T>({ items, renderItem, keyOf }: ListProps<T>) {
return (
<ul>
{items.map((it, i) => (
<li key={keyOf ? keyOf(it) : i}>{renderItem(it)}</li>
))}
</ul>
)
}
// 调用时 T 自动推导：
<List items={['a', 'b']} renderItem={s => s.toUpperCase()} /> // T = string
<List items={users} renderItem={u => u.name} keyOf={u => u.id} /> // T = User返回值：无返回值，作为编码模式使用
▶ 示例
示例可直接运行：展开后自动渲染，编辑代码即时生效。
输出结果：
三个列表复用同一 GenericList 组件，分别渲染字符串、数字、对象数组——泛型让「组件逻辑」与「元素类型」解耦（运行时 JSX 演示，类型在 TS 版本中推导）。💡 要点
💡 提示 泛型约束用 <T extends { id: number }>：既要求字段存在，又保留 T 的具体类型，比 any 安全得多。
ℹ️ 说明 常见泛型组件：表格 Table<T>、下拉 Select<T>、API 层 request<T>() 返回 Promise<T>。
⚠️ 注意 箭头函数写泛型 <T> 会被 JSX 当标签解析，需写成 <T,> 加逗号或改用 function 声明。
🏷️ 数据与工程化相关
💡 相关案例
更多案例整理中，敬请期待。
📚 相关教程
❓ 常见问题
Q 泛型组件的类型在哪一步确定？
A 调用时推导。传入 items={['a']}，TS 即把 T 固定为 string，之后 renderItem 的参数与返回值全部联动检查。
Q 和 any 有什么本质区别？
A any 放弃检查，两端都失去提示；泛型保留「未知但一致」的关系——输入什么类型，输出就是什么类型。
Q 什么时候真的需要泛型组件？
A 通用 UI 库（表格、表单、选择器）和数据层封装最常见；只写两三次就丢弃的组件不必泛型化。
