ReactJS实现FAQ折叠面板问题：点击按钮全部展开/收起

你当前用了单个isOpen状态变量，所有FAQ条目都绑定这个全局状态，所以任何一个按钮触发状态变更时，所有条目都会同步展开或收起。

方案1：支持同时展开多个FAQ条目 #

给每个FAQ条目维护独立的展开状态，用对象存储每个条目的展开状态：

export default function App() {
  // 用对象存储每个FAQ条目的展开状态，键为条目id，值为布尔值
  const [openStates, setOpenStates] = useState({});

  // 切换指定id条目的展开状态
  const toggleFAQ = (id) => {
    setOpenStates(prevStates => ({
      ...prevStates,
      [id]: !prevStates[id]
    }));
  };

  return (
    <div className="App">
      <h1>Faq/Accordian</h1>
      <div className="accordian">
        {questions.map((ele) => (
          <div key={ele.id} className="faq">
            <h3>{ele.title}</h3>
            <button onClick={() => toggleFAQ(ele.id)}>
              {openStates[ele.id] ? "-" : "+"}
            </button>
            {openStates[ele.id] && <h4>{ele.info}</h4>}
          </div>
        ))}
      </div>
    </div>
  );
}

方案2：同一时间仅展开一个FAQ条目 #

只存储当前展开的条目id，点击时切换该条目的状态：

export default function App() {
  // 存储当前展开的FAQ条目id，初始为null表示无展开条目
  const [openId, setOpenId] = useState(null);

  // 切换指定id条目的展开状态，点击已展开条目则收起
  const toggleFAQ = (id) => {
    setOpenId(prevId => prevId === id ? null : id);
  };

  return (
    <div className="App">
      <h1>Faq/Accordian</h1>
      <div className="accordian">
        {questions.map((ele) => (
          <div key={ele.id} className="faq">
            <h3>{ele.title}</h3>
            <button onClick={() => toggleFAQ(ele.id)}>
              {openId === ele.id ? "-" : "+"}
            </button>
            {openId === ele.id && <h4>{ele.info}</h4>}
          </div>
        ))}
      </div>
    </div>
  );
}

• 方案1适合需要同时查看多个FAQ内容的场景
• 方案2适合需要聚焦单个FAQ内容、避免页面内容过多的场景

内容的提问来源于stack exchange，提问作者Asav_Pandya