useState，设置图标活动和非活动

useState 是 React 中的一个 Hook，用于在函数组件中添加状态管理。它允许你在组件内部维护一个状态变量，并提供一个更新该状态的函数。这对于创建交互式 UI 非常有用。

基础概念

useState: 这是一个 React Hook，用于在函数组件中添加状态。
状态（State）: 状态是组件内部的数据，当状态改变时，React 会重新渲染组件。
图标活动和非活动: 在这个上下文中，可能指的是图标的视觉表现，例如，一个图标可以是激活状态（例如，高亮显示），也可以是非激活状态（例如，普通显示）。

类型

useState 接受一个参数，即状态的初始值，并返回一个数组，其中包含两个元素：

当前状态值（state）
用于更新状态的函数（setState）

应用场景

在需要根据用户交互或其他事件改变组件显示的情况下，可以使用 useState。例如，切换图标是活动还是非活动状态。

示例代码

以下是一个简单的示例，展示如何使用 useState 来切换图标的活动和非活动状态：

import React, { useState } from 'react';

function IconToggle() {
  const [isActive, setIsActive] = useState(false);

  return (
    <div>
      <button onClick={() => setIsActive(!isActive)}>
        {isActive ? 'Active Icon' : 'Inactive Icon'}
      </button>
      <img
        src={isActive ? '/path/to/active-icon.png' : '/path/to/inactive-icon.png'}
        alt="icon"
      />
    </div>
  );
}

export default IconToggle;

在这个例子中，我们有一个按钮和一个图标。点击按钮会切换 isActive 状态，从而改变按钮文本和图标图片。