如何将jQuery的$(this).toggleClass()转换为React单面板手风琴实现

核心思路 #

React是状态驱动DOM的框架，和jQuery直接操作DOM的思路完全不同。要实现「点击仅展开当前面板、收起其他」的效果，只需要用状态记录当前展开的面板标识，渲染时根据状态给对应面板添加open类即可。

不使用.map()的实现方案 #

假设你手动编写固定数量的面板（比如3个），代码如下：

import { useState } from 'react';

export default function Accordion() {
  // 状态存储当前展开的面板key，初始为null表示全部收起
  const [activePanel, setActivePanel] = useState(null);

  // 面板点击处理函数
  const handlePanelClick = (panelKey) => {
    // 点击当前展开的面板则收起，否则切换到该面板
    setActivePanel(prev => prev === panelKey ? null : panelKey);
  };

  return (
    <div className="accordion">
      {/* 面板1 */}
      <div 
        className={`panel ${activePanel === 'panel1' ? 'open' : ''}`}
        onClick={() => handlePanelClick('panel1')}
      >
        <div className="panel-header">面板1标题</div>
        <div className="panel-content">面板1内容...</div>
      </div>

      {/* 面板2 */}
      <div 
        className={`panel ${activePanel === 'panel2' ? 'open' : ''}`}
        onClick={() => handlePanelClick('panel2')}
      >
        <div className="panel-header">面板2标题</div>
        <div className="panel-content">面板2内容...</div>
      </div>

      {/* 面板3 */}
      <div 
        className={`panel ${activePanel === 'panel3' ? 'open' : ''}`}
        onClick={() => handlePanelClick('panel3')}
      >
        <div className="panel-header">面板3标题</div>
        <div className="panel-content">面板3内容...</div>
      </div>
    </div>
  );
}

与原jQuery逻辑的对应解释 #

• 原jQuery中$(".panel").not($(this)).removeClass("open") → React通过状态判断实现：只有匹配activePanel的面板会添加open类，其他面板自动不包含该类，无需手动移除。
• 原jQuery中$(this).toggleClass("open") → React通过setActivePanel(prev => prev === panelKey ? null : panelKey)实现：如果点击的是当前展开的面板，就将状态设为null（收起）；否则设为当前面板的key（展开）。

关于useRef的说明 #

useRef用于直接操作DOM，但React的设计核心是状态驱动渲染。除非有极端性能需求，否则状态驱动的方式更符合React的最佳实践，代码也更易维护和调试，不需要结合useRef来实现这个需求。

补充提示 #

如果后续面板数量增加，还是建议用.map()循环生成面板（代码更简洁且易维护），但当前方案完全满足你「避免使用.map()」的要求，逻辑和原jQuery代码完全一致。

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