使用挂钩设置active className

挂钩（hook）是React中一种用于在函数组件中添加状态和其他React特性的机制。使用挂钩可以让我们在不使用类组件的情况下使用React的状态和生命周期等功能。

在React中，useState是最常用的挂钩之一。它允许我们在函数组件中声明和使用状态。使用useState挂钩来设置active className时，可以通过维护一个布尔值状态来实现。

以下是一个例子：

import React, { useState } from 'react';

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

  const handleClick = () => {
    setIsActive(!isActive);
  };

  return (
    <div>
      <button className={isActive ? 'active' : ''} onClick={handleClick}>
        Click Me
      </button>
    </div>
  );
}

在上面的例子中，我们使用useState挂钩来创建一个名为isActive的状态和一个名为setIsActive的函数来更新该状态。初始状态设置为false。当按钮被点击时，handleClick函数会切换isActive的值，从而更新状态。根据isActive的值，我们在按钮的className中动态地添加或移除'active'类名。

这样，当isActive为true时，按钮的className将为'active'，当isActive为false时，按钮的className为空字符串。

推荐的腾讯云相关产品和产品介绍链接地址：

• 腾讯云函数计算（云原生无服务器计算服务）：https://cloud.tencent.com/product/scf
• 腾讯云轻量应用服务器（服务器运维）：https://cloud.tencent.com/product/lighthouse
• 腾讯云API网关（网络通信服务）：https://cloud.tencent.com/product/apigateway
• 腾讯云云数据库Redis版（数据库服务）：https://cloud.tencent.com/product/redis
• 腾讯云云点播（音视频处理服务）：https://cloud.tencent.com/product/vod
• 腾讯云人工智能智能图像（人工智能图像服务）：https://cloud.tencent.com/product/tiia
• 腾讯云物联网通信（物联网服务）：https://cloud.tencent.com/product/iotexplorer
• 腾讯云移动推送（移动开发服务）：https://cloud.tencent.com/product/tpns
• 腾讯云对象存储COS（存储服务）：https://cloud.tencent.com/product/cos
• 腾讯云区块链服务（区块链服务）：https://cloud.tencent.com/product/baas
• 腾讯云融合通信（音视频通信服务）：https://cloud.tencent.com/product/trtc
• 腾讯云云游戏引擎（元宇宙游戏服务）：https://cloud.tencent.com/product/gse

注意：以上只是给出了腾讯云的一些相关产品，其他云计算品牌商也会提供类似的产品和服务，具体选择需要根据实际需求和项目情况进行评估。