本文旨在讲解如何在 React 函数式组件中应用泛型类型，以实现更灵活和可复用的组件。通过具体示例，我们将演示如何将泛型类型传递给组件，并解决在使用 string | number 类型时可能遇到的 TypeScript 错误。同时，我们将提供一些建议，以帮助你编写更健壮的 React 代码。
泛型组件的实现
在 React 中，我们可以利用 TypeScript 的泛型特性来创建可以处理不同数据类型的组件。这对于创建可复用的 UI 组件尤其有用。
假设我们有一个 TestComponent 组件，它接收一个 options 数组，其中每个 option 都有一个 value 和一个 label。 我们希望 value 的类型可以是字符串或数字，并且希望组件能够根据传入的 value 类型进行相应的处理。
首先，我们定义 Option 接口：
export interface Option {
value: string | number;
label: string;
}然后，我们定义 TestComponentProps 接口，并使用 Option 接口：
interface TestComponentProps {
name: string;
options: Option[];
value: string | number;
onChange: (value: string) => void;
}最后，我们定义 TestComponent 组件：
import { FC } from "react";
interface Option {
value: string | number;
label: string;
}
interface TestComponentProps {
name: string;
options: Option[];
value: string | number;
onChange: (value: string) => void;
}
export const TestComponent: FC<TestComponentProps> = ({
name,
options,
value,
onChange,
}) => {
return <div className="">test component</div>;
};解决 TypeScript 错误
在使用 string | number 类型时，可能会遇到 TypeScript 错误，例如：
Argument of type 'string | number' is not assignable to parameter of type 'SetStateAction'. Type 'number' is not assignable to type 'SetStateAction'
这个错误通常发生在 useState hook 中，当你尝试将 string | number 类型的值传递给 setState 函数时。
例如：
const [color, setColor] = useState("red");
// ...
<TestComponent
name={1}
options={[
{ value: 1, label: "Name 1" },
{ value: 2, label: "Name 2" },
]}
value={1}
onChange={(v) => console.log("v", v)}
/>在这个例子中，color 的类型被推断为 string，因为初始值是 "red"。 当 TestComponent 组件的 onChange 函数尝试传递一个 number 类型的值给 setColor 函数时，TypeScript 会报错。
解决这个问题有两种方法：
-
修改 onChange 函数的参数类型: 将 TestComponentProps 接口中的 onChange 函数的参数类型修改为 string | number：
interface TestComponentProps { name: string; options: Option[]; value: string | number; onChange: (value: string | number) => void; } -
修改 useState hook 的类型: 显式地指定 useState hook 的类型为 string | number：
const [color, setColor] = useState<string | number>("red");
选择哪种方法取决于你的具体需求。 如果你希望 color 只能是字符串类型，那么应该选择第一种方法。 如果你希望 color 可以是字符串或数字类型，那么应该选择第二种方法。
总结
通过使用泛型类型，我们可以创建更灵活和可复用的 React 组件。 在使用 string | number 类型时，需要注意 TypeScript 错误，并根据具体情况选择合适的解决方法。
在编写 React 组件时，建议始终使用 TypeScript，并尽可能地使用泛型类型，以提高代码的可维护性和可复用性。 同时，要仔细阅读 TypeScript 错误信息，并理解错误的含义，才能更好地解决问题。
