将jQuery的addClass/removeClass功能迁移到React（非toggle场景）

你已经在使用useState，这是仅支持函数组件的React Hooks API，所以你当前使用的是函数组件。

核心思路是用状态驱动视图，不需要手动操作DOM增删类，所有类名通过状态动态生成，点击逻辑里做重复点击拦截即可满足需求。

实现步骤 #

• 声明状态存储当前激活的网格类型，可选值为museum/large，默认可按你需要设置
• 编写点击处理函数：如果点击的网格类型和当前激活值一致，直接返回不做任何操作；不一致则更新状态
• 给画廊列表、按钮动态绑定对应类名

完整代码示例 #

import { useState } from 'react'

function Gallery() {
  // 初始化默认激活小网格
  const [activeGrid, setActiveGrid] = useState('museum')

  const handleGridSwitch = (type) => {
    // 点击当前已激活按钮直接返回，不切换状态
    if (type === activeGrid) return
    setActiveGrid(type)
  }

  return (
    <div>
      {/* 切换按钮区域 */}
      <div className="grid-switch-btns">
        <button
          id="museum-grid-btn"
          className={activeGrid === 'museum' ? 'grid-active' : ''}
          onClick={() => handleGridSwitch('museum')}
        >
          小网格
        </button>
        <button
          id="large-grid-btn"
          className={activeGrid === 'large' ? 'grid-active' : ''}
          onClick={() => handleGridSwitch('large')}
        >
          大网格
        </button>
      </div>

      {/* 画廊列表 */}
      <div
        id="gallery-list"
        className={activeGrid === 'museum' ? 'museum-grid' : 'large-grid'}
      >
        {/* 你的画廊内容 */}
      </div>
    </div>
  )
}

export default Gallery

逻辑说明 #

• 不需要手动操作DOM增删类，所有类名随activeGrid状态自动更新，替代你之前的jQuery DOM操作逻辑
• 重复点击已激活按钮时直接终止逻辑，完全满足你不使用toggle、保持当前状态不变的需求
• 你已有的CSS类.museum-grid/.large-grid/.grid-active不需要做任何修改，直接复用即可

内容的提问来源于stack exchange，提问作者MerchantWeb