本文详解如何将单选式 FAQ 手风琴改造为支持多问题并行展开的交互模式，通过将 selected 状态从单一 ID 改为数组管理，并优化切换逻辑与 DOM 渲染判断。

本文详解如何将单选式 faq 手风琴改造为支持多问题并行展开的交互模式，通过将 `selected` 状态从单一 id 改为数组管理，并优化切换逻辑与 dom 渲染判断。

在默认实现中，FAQ 手风琴通常使用一个 selected 状态变量（如 number 或 string）来记录当前唯一展开项，导致新点击会自动收起旧项。要支持多开（multiple open），核心思路是将状态由「单值」升级为「ID 集合」——即用数组 selected: number[] 存储所有已展开项的 ID，并在切换时进行增删操作。

以下是改造后的完整实现要点：

✅ 状态初始化与结构

const [selected, setSelected] = useState([]); // 初始为空数组，表示无展开项

注意：不要用 useState({}) 或 useState(new Set())，React 状态更新依赖浅比较，数组是最直观、可预测且兼容性最佳的选择。

✅ 切换逻辑优化（关键！）

原逻辑 if (selected === id) ... else ... 仅适用于单选；多选需改用数组方法判断与更新：

const toggle = (id) => {
  setSelected(prev => 
    prev.includes(id) 
      ? prev.filter(item => item !== id) // 已展开 → 移除
      : [...prev, id]                    // 未展开 → 添加
  );
};

⚠️ 重要提醒：避免直接修改原数组（如 splice() 或 push()），必须通过 setSelected([...newArray]) 触发重新渲染。上文答案中直接操作 selected.splice() 是错误写法，会导致状态不同步和 React 警告。

✅ 渲染条件判断同步更新

所有 className 和按钮文案均需基于 selected.includes(question.id) 判断：

<button onclick="{()"> toggle(question.id)}>
  {selected.includes(question.id) ? "×" : "+"}
</button>

<p classname="{selected.includes(question.id)" :>
  {question.info}
</p>

✅ 完整可运行示例（精简版）

import React, { useState } from "react";
import "./faq.css";

const Questions = [
  { id: 1, title: "什么是 React？", info: "React 是一个用于构建用户界面的 JavaScript 库。" },
  { id: 2, title: "如何创建自定义 Hook？", info: "以 'use' 开头的函数，内部调用其他 Hook 即可。" },
  { id: 3, title: "useState 返回什么？", info: "返回一个状态变量和更新该变量的函数。" }
];

export default function Faq() {
  const [selected, setSelected] = useState([]);

  const toggle = (id) => {
    setSelected(prev => 
      prev.includes(id) 
        ? prev.filter(item => item !== id)
        : [...prev, id]
    );
  };

  return (
    <div classname="container">
      <h2>Frequently Asked Questions</h2>
      <div classname="questions">
        {Questions.map((q) => (
          <div key="{q.id}" classname="faq-item">
            <h4>
              {q.title}
              <button type="button" onclick="{()"> toggle(q.id)}
                aria-expanded={selected.includes(q.id)}
              >
                {selected.includes(q.id) ? "×" : "+"}
              </button>
            </h4>
            <p classname="{selected.includes(q.id)" :>
              {q.info}
            </p>
          </div>
        ))}
      </div>
    </div>
  );
}

? 补充建议

• 无障碍增强：为按钮添加 aria-expanded 属性，提升屏幕阅读器体验；
• 性能考虑：若 FAQ 条目极多（>100），可用 Set 优化 includes() 时间复杂度，但需配合 useState(() => new Set()) 及 useMemo 包装渲染逻辑；
• 样式提示：推荐为 .faq-item h4 添加 cursor: pointer 和过渡动画，强化可交互感。

通过以上改造，FAQ 组件即可自然支持任意组合的多问题展开，兼顾简洁性、可维护性与用户体验。