reactjs - 在 react-accessible-accordion 中单击最后一个 Accordion 项目时关闭它

Question

我在 React 中有一个基本的 FAQ 组件。我的问题是当我打开一个 Accordion 项目时，我无法在单击它时再次将其关闭。我可以关闭 Accordion 的唯一方法是单击另一个问题。但我也想在点击问题时关闭它。这是我的代码:

import React from "react";
import {
  Accordion,
  AccordionItem,
  AccordionItemHeading,
  AccordionItemButton,
  AccordionItemPanel,
} from "react-accessible-accordion";

import "react-accessible-accordion/dist/fancy-example.css";

export default function FAQ() {
  return (
    <>
      <Accordion>
        <AccordionItem>
          <AccordionItemHeading>
            <AccordionItemButton>Question 1</AccordionItemButton>
          </AccordionItemHeading>
          <AccordionItemPanel>
            <p>
              Exercitation in fugiat est ut ad ea cupidatat ut in cupidatat
              occaecat ut occaecat consequat est minim minim esse tempor laborum
              consequat esse adipisicing eu reprehenderit enim.
            </p>
          </AccordionItemPanel>
        </AccordionItem>
        <AccordionItem>
          <AccordionItemHeading>
            <AccordionItemButton>Question 2</AccordionItemButton>
          </AccordionItemHeading>
          <AccordionItemPanel>
            <p>
              Exercitation in fugiat est ut ad ea cupidatat ut in cupidatat
              occaecat ut occaecat consequat est minim minim esse tempor laborum
              consequat esse adipisicing eu reprehenderit enim.
            </p>
          </AccordionItemPanel>
        </AccordionItem>
      </Accordion>
    </>
  );
}

Answer 1

您需要向 Accordion 提供 bool 属性 allowZeroExpanded。

 <Accordion allowZeroExpanded>
... 
 </Accordion>

它会让你关闭最后一个否则会一直打开的。看这个official demo .