reactjs - React 组件的通用 props

Question

我有一个Linechart组件

<LineChart />

此组件应采用两个属性 xField 和 yField 均为字符串。为此，我创建了 prop 类型

type Props = {
    xField: string;
    yField: string;
}
// e.g <LineChart xField="Date" yField="EUR"/>

该组件还应采用数据点数组(具有两个键的对象)，例如:

<LineChart xField="Date" yField="EUR" data={[
  {Date:"22.2.2022", EUR:231}
  {Date:"23.2.2022", EUR:142}
  {Date:"24.2.2022", EUR:152}
]} />

现在，data 数组中对象的键应限制为 xField 或 yField 的值

<LineChart xField="Date" yField="EUR" data={[
  {Date:"22.2.2022", EURO:231} // Compile error since "EURO" is not a valid key
  {Date:"23.2.2022", EURO:142}
  {Date:"24.2.2022", EURO:152}
]} />

<LineChart xField="Date" yField="EUR" data={[
  {Date:"22.2.2022", EUR:231} // No compile error, EUR is a valid key since yField = "EUR"
  {Date:"23.2.2022", EUR:142}
  {Date:"24.2.2022", EUR:152}
]} />

如何修改 Linechart 组件的 Props 以匹配此行为？我想要实现的目标有可能吗？

我的折线图组件如下所示

export default function LineChart({ data, xField, yField }: Props) {
  const config: LineConfig = {
    data,
    xField,
    yField,
    slider: {
      start: 0.1,
      end: 0.5,
    },
  };

  return <Line {...config} style={{ gridRow: "2/4", gridColumn: "2/8" }} />;
}

Answer 1

您可以使用泛型来处理这个问题。为扩展字符串的 x 和 y 设置类型。然后，使用该类型作为数据数组的键。

interface Props<X extends string, Y extends string> {
  x: X;
  y: Y;
  data: Array<{ [k in X | Y]: k extends X ? string : number }>;
}

function MyComponent<X extends string, Y extends string>(
  props: Props<X, Y>
): JSX.Element {
  return <div />;
}

function MyComponent2() {
  return (
    <MyComponent
      x="Date"
      y="Eur"
      data={[
        { Date: '20-10-2022', Eur: 1 },
        { Date: '20-10-2022', Eur: 1 },
        { Date: '20-10-2022', Eur: 1 },
      ]}
    />
  );
}