独立控制每个可展开区域的展开折叠状态

本文讲解如何在 React 中为多个同类型可展开区域（如 FAQ 列表、手风琴组件）实现独立开关控制，避免全局状态导致所有区域同步开闭，核心是将状态粒度从组件级下放到每个条目级。

在 React 开发中，处理多个可展开区域（比如 FAQ 列表、手风琴组件）的独立开关控制，其实是个挺常见的场景。不知道你有没有遇到过这种情况：用单一 useState 管理多个可展开区域，结果所有区域都共享同一个 open 布尔值，点击任何一个按钮，所有区域都会同步开闭——这显然不是我们想要的交互体验。

问题的根源在哪里？很简单：状态没有与具体条目绑定。你不需要（也没法在函数组件里）用 this 关键字去搞什么类组件那一套，真正需要的是 为每个 section 维护独立的状态标识。

那么，怎么解决？我们来看一个比较优雅的方案：使用自定义 Hook 来封装可复用的状态逻辑。

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

export function useExpand() {
  const [expandedId, setExpandedId] = useState(null);

  const toggle = (id: T) => {
    setExpandedId(prev => prev === id ? null : id);
  };

  const expand = (id: T) => setExpandedId(id);
  const collapse = () => setExpandedId(null);

  return {
    expandedId,
    isExpanded: (id: T) => expandedId === id,
    toggle,
    expand,
    collapse,
  };
}

这个 Hook 返回的 API 结构很清晰：支持判断、展开、收起和切换。泛型 允许你用任意唯一标识（比如 string ID、number 索引或者 symbol）来精准匹配到每个条目。

在组件里怎么用？看代码：

import { useExpand } from './hooks/useExpand';

export default function ExpandableSections({ sections }: { 
  sections: { id: string; heading: string; content: string }[] 
}) {
  const { expandedId, isExpanded, toggle } = useExpand();

  return (
    

      {sections.map((item) => (
        

           toggle(item.id)}
            aria-expanded={isExpanded(item.id)}
            aria-controls={`content-${item.id}`}
          >
            
{item.heading}
          
          {isExpanded(item.id) && (
            

              {item.content}
            
          )}
        

      ))}
    

  );
}

这里有几个关键点值得注意：

• 用 item.id 而不是索引 i 作为状态标识符，这样即使列表重排序、增删项，状态也不会错位；
• aria-expanded 和 aria-controls 属性对可访问性很有帮助，屏幕阅读器能准确播报当前状态；
• toggle 方法天然支持“点击收起当前项”的逻辑，再点一次就能关闭，交互体验更自然；
• 如果希望默认展开某一项，可以在 useExpand 初始化时传入默认值，比如 useState('faq-1')。

需要警惕的是：

• ❌ 避免直接用数组索引作为 expandedId——列表动态变化时（比如过滤、排序），索引会错位，导致状态混乱；
• ❌ 没必要为每个 item 创建独立组件并各自调用 useState（虽然可行但代码冗余），自定义 Hook 更简洁、易测试、可复用；
• ✅ 如果需求是多选展开（非互斥），可以将状态改为 Set 并提供 add/remove/toggleAll 方法。

通过这种设计，每个 section 的展开状态完全解耦，点击互不影响，同时保持代码清晰、可维护，符合 React 最佳实践。这才是真正解决这类问题的正确姿势。