TypeScript React 组件泛型|极客教程

TypeScript React 组件泛型

在使用 TypeScript 开发基于 React 框架的应用程序时，我们经常需要创建可重用的组件。然而，有时候我们希望组件能够适应多种不同的数据类型或参数，这就需要使用到泛型（Generics）。

本文将详细解释 TypeScript 中如何在 React 组件中使用泛型，并提供示例代码和运行结果。

什么是泛型？

泛型是一种在编程语言中使用类型变量来创建可重用代码的方式，它可以在不指定具体类型的情况下工作。在 TypeScript 中，泛型可以应用于函数、接口和类，以提供更灵活和可复用的代码。

在 React 组件中使用泛型

在 React 组件中，我们可以使用泛型来指定组件的 props 类型。这使得我们可以创建可接受任意类型的 props 的组件，从而增加了组件的通用性和复用性。

下面是一个示例代码，其中定义了一个接受泛型 props 的 React 组件：

import React, { FC } from "react";

interface Props<T> {
  data: T[];
  renderItem: (item: T) => React.ReactNode;
}

const List: FC<Props<any>> = ({ data, renderItem }) => {
  return (
    <ul>
      {data.map(item => (
        <li key={item}>{renderItem(item)}</li>
      ))}
    </ul>
  );
};

export default List;

在上面的示例中，我们定义了一个名为 List 的 React 组件，并使用泛型 T 来指定 data 属性的类型。data 属性是一个数组，其元素的类型为 T。

同时，我们还定义了 renderItem 属性，它接受 item 参数（类型为 T）并返回一个 React 组件。在组件的 render 方法中，我们遍历 data 数组，并针对每个元素渲染一个 <li> 元素。renderItem 函数被用于渲染每个子项，并将结果返回到数组中。

这个通用的 List 组件可以接受任意类型的数据，并可以自定义每个子项的渲染方法。这样，我们就能够在不同场景中复用该组件，并灵活地渲染不同类型的数据。

下面是一个使用该泛型组件的示例：

import React from "react";
import List from "./List";

interface User {
  id: number;
  name: string;
}

const users: User[] = [
  { id: 1, name: "Alice" },
  { id: 2, name: "Bob" },
  { id: 3, name: "Charlie" }
];

const App: React.FC = () => {
  return (
    <div>
      <List<User>
        data={users}
        renderItem={user => <span>{user.name}</span>}
      />
    </div>
  );
};

export default App;

在上面的示例中，我们定义了一个名为 User 的接口，代表了用户的数据类型。然后，我们创建了一个名为 users 的数组，包含了几个用户对象。

在 App 组件中，我们使用了之前定义的 List 组件，并将 users 数组作为 data 属性传递给它。同时，我们还传递了一个函数给 renderItem 属性，用于渲染每个用户对象的名称。