React TypeScript可复用图表组件：多数据类型适配问题

方案思路 #

通过给泛型组件传递字段映射配置，动态从不同结构的数据集中提取labels和data数组。核心是利用TypeScript泛型的keyof特性，确保传入的字段名属于当前数据集的键，避免类型错误。

具体实现 #

1. 定义带字段映射的泛型组件Props #

// 通用Props定义，支持任意含数值字段的数据集
interface DashboardChartCardProps<T> {
  data: T[];
  labelField: keyof T; // 指定用作图表标签的字段名（如name/title/author/country）
  valueField: keyof T; // 指定用作图表数值的字段名（这里固定为amount也可，留参数更通用）
  title: string; // 图表卡片标题
}

// 泛型组件实现
function DashboardChartCard<T extends Record<string, unknown>>({
  data,
  labelField,
  valueField,
  title
}: DashboardChartCardProps<T>) {
  // 提取labels和图表数据，统一类型避免格式问题
  const labels = data.map(item => String(item[labelField]));
  const chartData = data.map(item => Number(item[valueField]));

  // 替换为你实际使用的图表组件（如Chart.js/ECharts）
  return (
    <div className="chart-card">
      <h2>{title}</h2>
      <YourChartLibrary labels={labels} data={chartData} />
    </div>
  );
}

2. 针对不同数据集调用组件 #

// 渲染dataA（name+amount）的图表
<DashboardChartCard
  data={dataA}
  labelField="name"
  valueField="amount"
  title="名称统计"
/>

// 渲染dataB（title+amount）的图表
<DashboardChartCard
  data={dataB}
  labelField="title"
  valueField="amount"
  title="标题统计"
/>

// 渲染dataC（author+amount）的图表
<DashboardChartCard
  data={dataC}
  labelField="author"
  valueField="amount"
  title="作者统计"
/>

// 渲染dataD（country+amount）的图表
<DashboardChartCard
  data={dataD}
  labelField="country"
  valueField="amount"
  title="国家统计"
/>

3. 简化优化（固定数值字段） #

如果确认所有数据集的数值字段都是amount，可以简化Props，强制约束数据集必须包含amount字段，只需要传递标签字段：

// 约束数据集必须包含amount字段
interface DashboardChartCardProps<T extends { amount: number }> {
  data: T[];
  labelField: Exclude<keyof T, 'amount'>; // 排除amount，只允许其他字段作为标签
  title: string;
}

function DashboardChartCard<T extends { amount: number }>({
  data,
  labelField,
  title
}: DashboardChartCardProps<T>) {
  const labels = data.map(item => String(item[labelField]));
  const chartData = data.map(item => item.amount);

  // 渲染逻辑...
}

调用时更简洁：

<DashboardChartCard
  data={dataA}
  labelField="name"
  title="名称统计"
/>

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