在 React 函数式组件中应用泛型-js教程-PHP中文网

在 React 函数式组件中应用泛型

聖光之護

发布： 2025-08-17 23:44:01

原创

401人浏览过

在 react 函数式组件中应用泛型

本文介绍了如何在 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<TestComponentProps> = ({
  name,
  options,
  value,
  onChange,
}) => {
  return <div className="">test component</div>;
};

登录后复制

联合类型与 useState 的问题

在使用 string | number 联合类型时，可能会遇到与 useState 相关的问题。例如：

function App() {
  const [color, setColor] = useState("red");

  return (
    <div className="App">
      <TestComponent
        name="name 1"
        options={[
          { value: "name1", label: "Name 1" },
          { value: "name2", label: "Name 2" },
        ]}
        value="name1"
        onChange={(c) => setColor(c)}
      />

      <TestComponent
        name={1}
        options={[
          { value: 1, label: "Name 1" },
          { value: 2, label: "Name 2" },
        ]}
        value={1}
        onChange={(v) => console.log("v", v)}
      />
    </div>
  );
}

登录后复制

上述代码可能会产生一个错误：

诚客在线考试平台管理系统

诚客在线考试是由南宁诚客网络科技有限公司开发的一款手机移动端的答题网站软件，它应用广泛适合各种学校、培训班、教育机构、公司企业、事业单位、各种社会团体、银行证券等用于学生学习刷题、员工内部培训，学员考核、员工对公司制度政策的学习……可使用的题型有：单选题、多选题、判断题支持文字，图片，音频，视频、数学公式。可以设置考试时间，答题时间，考试次数，是否需要补考，是否可以看到自己成绩。练习模式，支持学生

查看详情

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<string | number>("red");
```
登录后复制
这种方法更灵活，允许 color 状态存储 string 或 number 类型的值。