如何为每个可展开区域独立控制展开/折叠状态-js教程-PHP中文网

如何为每个可展开区域独立控制展开/折叠状态

本文讲解如何在 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,
  };
}</t></t>

该 Hook 返回结构化 API，支持判断、展开、收起和切换，泛型允许你用任意唯一标识（如 string ID、number 索引或 symbol）精准匹配条目。

卡奥斯智能交互引擎

一款聚焦工业领域知识与信息检索的AI交互工具，通过智能搜索和交互方式辅助用户获取工业相关信息。

下载

在组件中使用：

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>
  );
}</string>

? 关键要点：