本文讲解如何在 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 结构很清晰：支持判断、展开、收起和切换。泛型
在组件里怎么用？看代码：
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) => (
{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 最佳实践。这才是真正解决这类问题的正确姿势。
