React折叠面板优化：单useState替代多状态方案咨询

你的当前实现存在大量重复代码，通过将多个useState合并为单个状态管理，并使用通用处理函数，可以大幅简化代码，提升可维护性。以下是具体优化方案：

1. 重构状态结构 #

用单个useState管理所有折叠面板的状态，使用对象存储每个面板的展开/收起状态（true表示展开，false表示收起）：

import { useState } from 'react';

function Solution() {
  // 初始化所有面板为展开状态
  const [panelStates, setPanelStates] = useState({
    panel1: true,
    panel2: true,
    panel3: true,
    panel4: true,
    panel5: true,
    panel6: true,
    panel7: true
  });

2. 编写通用状态切换函数 #

创建一个通用函数，接收面板ID作为参数，实现「切换当前面板状态 + 重置其他所有面板为展开状态」的逻辑：

const handlePanelToggle = (panelId) => {
    setPanelStates(prevStates => {
      // 先将所有面板重置为展开状态
      const newStates = Object.fromEntries(
        Object.keys(prevStates).map(key => [key, true])
      );
      // 切换当前面板的状态
      newStates[panelId] = !prevStates[panelId];
      return newStates;
    });
  };

3. 动态渲染折叠面板 #

在渲染面板时，通过面板ID获取对应状态，点击事件直接调用通用函数即可：

return (
    <div className="panels-container">
      {/* 示例：第一个折叠面板 */}
      <div className={`panel-item ${panelStates.panel1 ? 'expanded' : 'collapsed'}`}>
        <button onClick={() => handlePanelToggle('panel1')}>
          {panelStates.panel1 ? '收起' : '展开'} 面板1
        </button>
        {panelStates.panel1 && <div className="panel-content">面板1的内容</div>}
      </div>

      {/* 其他面板同理，只需替换panelId即可 */}
      <div className={`panel-item ${panelStates.panel2 ? 'expanded' : 'collapsed'}`}>
        <button onClick={() => handlePanelToggle('panel2')}>
          {panelStates.panel2 ? '收起' : '展开'} 面板2
        </button>
        {panelStates.panel2 && <div className="panel-content">面板2的内容</div>}
      </div>

      {/* 重复上述结构至panel7 */}
    </div>
  );
}

优化优势 #

• 代码精简：去掉了7个重复的useState和7个冗余的处理函数，逻辑更集中
• 可扩展性强：新增折叠面板时，只需在初始状态中添加新的键值对，渲染时复用相同结构即可，无需额外编写处理逻辑
• 状态统一：所有面板状态集中管理，便于后续扩展批量操作（比如一键展开所有面板）

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