如何让React子组件从父组件推断Prop类型？适配多父组件

直接用TypeScript泛型就能解决这个问题，核心思路是给子组件定义泛型参数，让rows和formatRow的类型都依赖这个泛型，从而适配不同父组件传入的行数据结构。

实现步骤 #

1. 定义泛型Props类型
   给子组件的Props添加一个泛型参数Row，关联rows和formatRow的类型：

import React from 'react';

interface ChildProps<Row> {
  rows: Row[];
  // formatRow接收当前泛型Row类型的参数，返回React元素
  formatRow: (row: Row) => React.ReactElement;
}

2. 实现泛型子组件
   在组件定义时声明泛型参数，TypeScript会自动从父组件传入的props中推导Row的具体类型：

const Child = <Row,>({ rows, formatRow }: ChildProps<Row>) => {
  return (
    <div>
      {rows.map((row, index) => (
        <div key={index}>{formatRow(row)}</div>
      ))}
    </div>
  );
};

父组件调用示例 #

假设两个父组件分别有不同的行数据结构：

// 第一个父组件的行类型
interface UserRow {
  id: number;
  name: string;
  email: string;
}

// 第二个父组件的行类型
interface ProductRow {
  sku: string;
  title: string;
  price: number;
}

// 第一个父组件
const Parent1 = () => {
  const userRows: UserRow[] = [
    { id: 1, name: 'Alice', email: 'alice@example.com' },
    { id: 2, name: 'Bob', email: 'bob@example.com' },
  ];

  return (
    <Child
      rows={userRows}
      formatRow={(row) => (
        <div>
          {row.name} - {row.email}
        </div>
      )}
    />
  );
};

// 第二个父组件
const Parent2 = () => {
  const productRows: ProductRow[] = [
    { sku: 'PROD-001', title: 'Laptop', price: 999 },
    { sku: 'PROD-002', title: 'Mouse', price: 29 },
  ];

  return (
    <Child
      rows={productRows}
      formatRow={(row) => (
        <div>
          {row.title} - ${row.price}
        </div>
      )}
    />
  );
};

这样做的好处是：子组件不需要硬编码任何具体的行数据类型，完全由父组件传入的类型驱动，同时TypeScript会在编译阶段校验formatRow的参数和返回值类型，确保类型安全。

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