本文讲解如何在 React 中为多个同类型可展开区域（如 FAQ 列表、手风琴组件）实现独立开关控制，避免全局状态导致所有区域同步开闭，核心是将状态粒度从组件级下放到每个条目级。
本文讲解如何在 react 中为多个同类型可展开区域（如 faq 列表、手风琴组件）实现**独立开关控制**，避免全局状态导致所有区域同步开闭，核心是将状态粒度从组件级下放到每个条目级。
在 React 中，当你使用单一 useState 管理多个可展开区域（如 sections.map() 渲染的列表）时，所有区域共享同一个 open 布尔值，因此点击任一按钮都会触发全部区域的显隐切换——这显然不符合交互预期。
根本原因在于：状态未与具体条目绑定。你不需要（也无法在函数组件中）使用 this 关键字（这是类组件语法，且在现代 React 中已不推荐）；真正需要的是 为每个 section 维护独立的状态标识。
✅ 推荐方案：使用自定义 Hook 封装可复用的状态逻辑
// hooks/useExpand.ts
import { useState } from 'react';
export function useExpand<T = string>() {
const [expandedId, setExpandedId] = useState<T | null>(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，支持判断、展开、收起和切换，泛型 <T> 允许你用任意唯一标识（如 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<string>();
return (
<div className="expandable-sections">
{sections.map((item) => (
<div key={item.id} className="section">
<button
type="button"
onClick={() => toggle(item.id)}
aria-expanded={isExpanded(item.id)}
aria-controls={`content-${item.id}`}
>
<h2>{item.heading}</h2>
</button>
{isExpanded(item.id) && (
<div id={`content-${item.id}`} className="section-content">
{item.content}
</div>
)}
</div>
))}
</div>
);
}? 关键要点：
- 使用 item.id（而非索引 i）作为状态标识符，确保重排序、增删项时状态稳定；
- aria-expanded 和 aria-controls 提升可访问性，屏幕阅读器能准确播报当前状态；
- toggle 方法支持“点击收起当前项”逻辑（即再次点击关闭），体验更自然；
- 若需默认展开某一项，可在 useExpand 初始化时传入默认值：useState<T | null>('faq-1')。
⚠️ 注意事项：
- ❌ 避免直接用数组索引 i 作为 expandedId —— 当列表动态变化（如过滤、排序）时，索引会错位，导致状态错乱；
- ❌ 不要为每个 item 创建独立组件并各自调用 useState（虽可行但冗余），自定义 Hook 更简洁、易测试、可复用；
- ✅ 如需支持多选展开（非互斥），可将状态改为 Set<string> 并提供 add/remove/toggleAll 方法。
通过这种设计，每个 section 的展开状态完全解耦，点击互不影响，同时保持代码清晰、可维护、符合 React 最佳实践。
