react.js - React 中 父组件调用子组件传递 A，B 两个参数，B 参数类型如何根据 A 参数推断出来？

Question

//子组件
type Props = { name: unknown; onChange: (data: unknown) => void };

export function Child(props: Props) {
  return (
    <div
      onClick={() => {
        props.onChange(props.name);
      }}
    ></div>
  );
}

//父组件
export function Parent() {
  const name = ''; // name的类型任意可能是string也可能其他复杂类型
  return (
    <Child
      name={name}
      onChange={(data) => {
        console.log(data); //如果希望这里data类型和name保持一致，应该如何编写字组件Props类型呢
      }}
    ></Child>
  );
}

父组件 onChange 里面 data 如何根据 name 类型推断出来

Answer 1

type Props<T> = { name: T; onChange: (data: T) => void };

export function Child<T>(props: Props<T>) {
    /** */
}

Answer 2

在React和TypeScript中，要使子组件的Props类型允许onChange的data参数类型根据name参数类型进行推断，你需要使用泛型（Generics）。泛型允许你创建可重用的组件，这些组件可以工作于多种数据类型上。

下面是如何修改你的子组件Child和父组件Parent以利用泛型来实现这一点的示例：

// 子组件
type ChildProps<T> = {
  name: T;
  onChange: (data: T) => void;
};

export function Child<T>(props: ChildProps<T>) {
  return (
    <div
      onClick={() => {
        props.onChange(props.name);
      }}
    ></div>
  );
}

// 父组件
export function Parent() {
  const name = '' as string; // 这里明确指定name的类型为string
  return (
    <Child
      name={name}
      onChange={(data: string) => { // 这里data的类型被推断为string
        console.log(data);
      }}
    />
  );
}

// 或者，如果你想要TypeScript自动推断类型，你可以省略`onChange`中的类型注解：
export function ParentAutoInferred() {
  const name = '' as string; // 这里明确指定name的类型为string
  return (
    <Child
      name={name}
      onChange={(data) => { // TypeScript将自动推断data的类型为string
        console.log(data);
      }}
    />
  );
}

在这个例子中，Child组件现在是一个泛型组件，它接受一个类型参数T，该类型参数用于指定name和onChange的data参数的类型。在Parent组件中，我们明确指定了name的类型为string，因此onChange的data参数也被自动推断为string类型。

如果你不想在Parent组件的onChange处理函数中明确指定类型，TypeScript也会基于Child组件的泛型参数来自动推断data的类型。这就是在ParentAutoInferred组件中我们所做的。