react hooks .toggle()

在 React 中，并没有内置的 .toggle() 方法用于切换元素的类名。不过，你可以使用 React Hooks 来实现类似的功能。

一种常见的方法是使用 useState Hook 来管理一个布尔值的状态，然后通过条件渲染来决定元素是否显示。下面是一个简单示例：

import React, { useState } from "react";

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

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

  return (
    <div>
      <button onClick={toggle}>Toggle</button>
      {isActive && <div className="active">Content</div>}
    </div>
  );
}

在上述代码中，我们使用了 useState Hook 来创建了一个名为 isActive 的状态变量和一个名为 setIsActive 的更新函数。toggle 函数会在按钮点击时被调用，通过调用 setIsActive 来切换 isActive 的值。

在 JSX 中，我们使用条件渲染来决定是否渲染带有 "active" 类名的 div 元素。只有当 isActive 的值为 true 时，才会渲染该元素。

这样，每次点击按钮时，就会切换元素的显示状态。