反应元素的 Typescript 数组

在 TypeScript 中，您可以定义一个元素类型固定的数组，并使用反应来动态更新数组中的元素。这是一个非常实用的特性。

定义数组

在 TypeScript 中，您可以定义一个数组变量并指定元素类型：

let myArray: number[] = [1, 2, 3];

这个数组只能包含 number 类型的元素。您也可以使用泛型来定义多种类型的数组：

let myArray: Array<number | string> = [1, "two", 3, "four"];

这个数组可以包含 number 或 string 类型的元素。

反应数组

在 React 中，您可以使用 useState 钩子来定义一个状态变量。您还可以使用它来定义一个数组状态变量：

import { useState } from "react";

function MyComponent() {
  const [myArray, setMyArray] = useState<number[]>([1, 2, 3]);

  return (
    <div>
      {myArray.map((num) => (
        <span>{num}</span>
      ))}
    </div>
  );
}

这个组件的初始状态是包含 1，2 和 3 三个元素的数组。在 JSX 中，我们使用 myArray.map 将数组中的每个元素渲染到屏幕上。

尝试在组件中添加一个按钮，每次点击后将数组中的所有元素增加一：

function MyComponent() {
  const [myArray, setMyArray] = useState<number[]>([1, 2, 3]);

  function handleClick() {
    setMyArray(myArray.map((num) => num + 1));
  }

  return (
    <div>
      {myArray.map((num) => (
        <span>{num}</span>
      ))}
      <button onClick={handleClick}>Add 1</button>
    </div>
  );
}

这个代码片段会在组件中添加一个点击按钮，每次点击后将数组中的所有元素增加一。我们使用 setMyArray 来更新数组。

总结

在 TypeScript 中定义一个类型固定的数组非常容易。您可以使用泛型定义多种类型元素的数组。在 React 中，您可以使用 useState 钩子来定义一个数组状态变量，并使用 setMyArray 来动态更新它。