本文介绍了如何在 React 函数式组件中使用泛型，以创建更灵活、可复用的组件。通过将类型参数传递给组件，可以使其处理不同类型的数据，避免代码冗余。同时，针对 string | number 联合类型在 useState 中遇到的问题，提供了两种解决方案，帮助开发者更好地掌握 React 类型系统。
在 React 中，使用 TypeScript 可以显著提高代码的可维护性和可读性。泛型是一种强大的工具，可以创建可重用的组件，这些组件可以处理各种数据类型，而无需为每种类型编写不同的组件。本文将详细介绍如何在 React 函数式组件中使用泛型，并解决一些常见问题。
泛型组件的创建
假设我们有一个 TestComponent 组件，它接收一个 options 数组，其中 options 的 value 属性可以是 string 或 number 类型。
首先，定义 Option 接口：
interface Option {
value: string | number;
label: string;
}然后，定义 TestComponentProps 接口：
interface TestComponentProps {
name: string;
options: Option[];
value: string | number;
onChange: (value: string) => void;
}最后，创建 TestComponent 组件：
import { FC } from "react";
export const TestComponent: FC = ({
name,
options,
value,
onChange,
}) => {
return test component;
}; 联合类型与 useState 的问题
在使用 string | number 联合类型时，可能会遇到与 useState 相关的问题。例如：
function App() {
const [color, setColor] = useState("red");
return (
setColor(c)}
/>
console.log("v", v)}
/>
);
}上述代码可能会产生一个错误：
专为中小型企业定制的网络办公软件,富有竞争力的十大特性： 1、独创 web服务器、数据库和应用程序全部自动傻瓜安装，建立企业信息中枢 只需3分钟。 2、客户机无需安装专用软件，使用浏览器即可实现全球办公。 3、集成Internet邮件管理组件，提供web方式的远程邮件服务。 4、集成语音会议组件，节省长途话费开支。 5、集成手机短信组件，重要信息可直接发送到员工手机。 6、集成网络硬
Argument of type 'string | number' is not assignable to parameter of type 'SetStateAction'. Type 'number' is not assignable to type 'SetStateAction'
这是因为 useState 的初始值 "red" 确定了 color 状态的类型为 string。因此，setColor 只能接受 string 类型的参数。
解决方案
解决此问题有两种方法：
-
更改 onChange 参数类型： 将 TestComponentProps 接口中 onChange 的参数类型更改为 string。
interface TestComponentProps { name: string; options: Option[]; value: string | number; onChange: (value: string) => void; }这种方法简单直接，但限制了 onChange 只能处理 string 类型的值。
-
更改 useState 的类型： 使用泛型来指定 useState 的类型为 string | number。
const [color, setColor] = useState
("red"); 这种方法更灵活，允许 color 状态存储 string 或 number 类型的值。
总结
通过本文，我们学习了如何在 React 函数式组件中使用泛型，以及如何解决 string | number 联合类型与 useState 结合使用时遇到的问题。选择哪种解决方案取决于具体的需求和场景。理解这些概念可以帮助开发者编写更健壮、可维护的 React 代码。
