在 react-accessible-accordion 中单击最后一个手风琴项时关闭它答案

【问题标题】：Close the last accordion item when clicked on it in react-accessible-accordion在 react-accessible-accordion 中单击最后一个手风琴项时关闭它
【发布时间】：2021-07-03 18:43:26
【问题描述】：

我在 React 中有一个基本的常见问题解答组件。我的问题是当我打开一个手风琴项目时，当我点击它时我无法再次关闭它。我可以关闭手风琴的唯一方法是单击另一个问题。但是当我点击问题时，我也想关闭它。这是我的代码：

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

【问题讨论】：

标签： reactjs react-native accordion

【解决方案1】：

您需要为Accordion 提供一个布尔属性allowZeroExpanded。

 <Accordion allowZeroExpanded>
... 
 </Accordion>

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

【讨论】：

这基本上是 OP 已经拥有的不是吗，他想要一种切换机制

【解决方案2】：

这就是我要做的事情：

const [FAQS, setFAQS] = useState([
    {
      title:"Question 1",
      answer:`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.`,
       expanded:false
    },
    {
      title:"Question 2",
      answer:`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..`,
      expanded:true
    },
  ])


  const setExpand=(index)=>e=>{
     let temp=[...FAQS]
     temp[index].expanded= !temp[index].expanded
     setFAQS(temp)
  }

  return (
    <Accordion allowZeroExpanded={true}  >
        {
          FAQS.map((FAQ,index)=><AccordionItem onClick={setExpand(index)} dangerouslySetExpanded={FAQ.expanded} key={FAQ.title} >
            <AccordionItemHeading>
              <AccordionItemButton  >{FAQ.title}</AccordionItemButton>
            </AccordionItemHeading>
            <AccordionItemPanel>
              <p>
              {FAQ.answer}
              </p>
            </AccordionItemPanel>
          </AccordionItem>)
        }
    </Accordion>
  );

【讨论】：