在 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>
  );
}

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

Loomi

全球首个AI社媒内容多智能体系统

下载

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 类型的参数。

解决方案

解决此问题有两种方法：

1. 更改 onChange 参数类型： 将 TestComponentProps 接口中 onChange 的参数类型更改为 string。

   interface TestComponentProps {
     name: string;
     options: Option[];
     value: string | number;
     onChange: (value: string) => void;
   }

   这种方法简单直接，但限制了 onChange 只能处理 string 类型的值。

2. 更改 useState 的类型： 使用泛型来指定 useState 的类型为 string | number。

   const [color, setColor] = useState<string | number>("red");

   这种方法更灵活，允许 color 状态存储 string 或 number 类型的值。

总结

通过本文，我们学习了如何在 React 函数式组件中使用泛型，以及如何解决 string | number 联合类型与 useState 结合使用时遇到的问题。选择哪种解决方案取决于具体的需求和场景。理解这些概念可以帮助开发者编写更健壮、可维护的 React 代码。