每个折叠区域独立控制展开收起

本文介绍如何在 React 中为多个可展开区域实现独立的开关状态，避免点击一个区域导致所有区域同步切换，核心是为每个区域维护独立的状态而非共享单一布尔值。

先明确几个关键点。在构建多段式可折叠内容（如 FAQ 模块或手风琴组件）时，最常见的误区是什么？很多人习惯用单个 useState 管理所有区域的开闭状态。结果呢？点击一个，全部切换。这显然不是预期效果。根本原因在于，那个 open 变量是全局开关，没有按项隔离。JavaScript 没有面向 DOM 的 this 来帮你自动绑定上下文，React 的正确解法很简单——把状态粒度下沉到每个条目层级。

推荐方案：为每个 section 维护独立状态

最清晰、易维护的方式，就是让每个 section 拥有自己的独立状态。具体有两种实现路径。

方式一：在 map 内部声明状态（适合简单场景）

export default function ExpandSection({ sections }) {
  return (
    <>
      {sections.map((item, i) => {
        const [open, setOpen] = useState(false); //  每个 item 独立 state
        return (
          

             setOpen(!open)}>
              
{item.heading}
            
            {open && 
{item.content}
}
          
        );
      })}
    >
  );
}

这样做的好处很明显：逻辑内聚，没有状态泄漏的风险。需要注意的是，如果 sections 频繁重渲染，或者每个 item 里嵌套复杂子组件，可能会带来轻微性能开销。但对绝大多数业务场景来说，这点代价基本可以忽略。

方式二：自定义 Hook 封装（推荐用于复用或逻辑增强）

常见的设计是用单个字符串匹配的方式，比如用一个 state 存储当前展开项的 heading。但这其实是个坑：标题重复时判断失效，且数据动态增删时维护困难。更健壮的做法是基于唯一 ID 或索引来管理状态。

// hooks/useToggle.ts
import { useState } from 'react';

export function useToggle(initialValue: T[] = []) {
  const [toggled, setToggled] = useState>(new Set(initialValue));

  const toggle = (id: T) => {
    setToggled(prev => {
      const next = new Set(prev);
      if (next.has(id)) next.delete(id);
      else next.add(id);
      return next;
    });
  };

  const isOpen = (id: T) => toggled.has(id);

  return [isOpen, toggle] as const;
}

在组件中使用时也很简洁：

export function Accordion({ sections }) {
  const [isOpen, toggle] = useToggle();

  return (
    

      {sections.map((item, index) => (
        

           toggle(index)}>
            
{item.heading}
          
          {isOpen(index) && 
{item.content}
}
        
      ))}
    
  );
}

这个方案的优势突出：支持多选、状态可预测、类型安全，且扩展方便——比如添加 openAll 或 closeAll 方法，只需在 Hook 内增加逻辑即可。

关键注意事项

• 避免依赖 item.heading 作为状态标识：标题可能重复、含空格或特殊字符，容易引发 bug。必须使用稳定唯一的 ID，如 item.id，或数组索引（前提是数据顺序不变）。
• key 必须稳定且唯一：不要直接用 index 当 key，除非数据固定不变。否则列表重排后，React 可能复用错误状态，导致意外行为。
• 不要在事件处理器中“模拟 this”：React 函数组件没有 this，也不要使用 ref 或直接操作 DOM 来手动控制——这违背声明式设计原则，只会让代码难以维护。

总结

归根结底，“点击一个区域影响全部”的问题，本质是状态建模粒度不到位。正确思路不是寻找 this，而是把状态从组件级下放到每个数据项级别。实现时，优先用 useState 在 map 内声明，简洁直接；后续需要跨组件复用或支持批量操作、持久化等增强功能时，再抽一个带泛型的自定义 Hook。始终使用数据唯一性作为状态键，这样写出的行为才可预测、可调试、可扩展。