如何使用TypeScript的泛型來增強React組件的靈活性

在React組件中使用TypeScript的泛型可以增強組件的靈活性。通過泛型，我們可以定義組件的props和state的類型，并且可以根據需要傳入不同的類型參數來靈活地使用組件。

以下是一個示例代碼，演示如何在React組件中使用TypeScript的泛型：

import React, { useState } from "react";

// 定義泛型接口 Props，用于指定組件的props類型
interface Props<T> {
  initialValue: T;
}

// 使用泛型 Props<T> 定義一個函數式組件 GenericComponent
function GenericComponent<T>({ initialValue }: Props<T>): React.ReactElement {
  const [value, setValue] = useState<T>(initialValue);

  const handleChange = (newValue: T) => {
    setValue(newValue);
  };

  return (
    <div>
      <p>Current value: {value}</p>
      <button onClick={() => handleChange(initialValue)}>Reset</button>
    </div>
  );
}

// 使用泛型參數為 number 的 GenericComponent
const NumberComponent = () => {
  return <GenericComponent<number> initialValue={0} />;
};

// 使用泛型參數為 string 的 GenericComponent
const StringComponent = () => {
  return <GenericComponent<string> initialValue="Hello" />;
};

export default function App() {
  return (
    <div>
      <h1>Number Component</h1>
      <NumberComponent />
      
      <h1>String Component</h1>
      <StringComponent />
    </div>
  );
}

在上面的示例代碼中，我們定義了一個泛型接口Props<T>，用于指定組件的props類型。然后在GenericComponent組件中使用了這個泛型接口，并根據傳入的類型參數T來決定initialValue和useState的類型。最后我們分別使用NumberComponent和StringComponent來演示如何使用不同的類型參數來使用GenericComponent組件。

通過使用TypeScript的泛型，我們可以根據需要傳入不同的類型參數來靈活地使用React組件，增強了組件的靈活性和復用性。