React折叠-一次打开一个手风琴

Question

我正在使用React的折叠npm包，它解决了我的大多数任务，但是没有属性允许一次只打开一个活动手风琴。我需要逻辑，将关闭先前打开的手风琴，当用户单击一个新的。下面是我的父组件和子组件的代码。欢迎任何帮助。

孩子:

import Collapsible from 'react-collapsible';
const Accordion = ({
open,
trigger,
triggerWhenOpen,
children,
}) => {
return (
<Collapsible
open={open}
lazyRender={true}
triggerTagName="div"
trigger={trigger}
triggerWhenOpen={triggerWhenOpen}
className="mb-[30px]"
>
{children}
</Collapsible>
);
};
export default Accordion;

父:

{/*Accordion mapping out */}
{accordionArray.map((accName) => (
<Accordion
open={accName.open}
trigger={accName.trigger}
triggerWhenOpen={accName.triggerWhenOpen}
key={accName + Math.Random()} //
>
<AccordionContent
imgSrc={'/' + accName.imgSrc}
imgAlt={accName.imgAlt}
/>
</Accordion>
))}

Answer 1

你可以像这样一次打开一个折叠文件，这对我来说很有效

import { useState } from 'react';
import Collapsible from 'react-collapsible';
function App() {
const [count, setCount] = useState(0);
return (
<>
<Collapsible trigger="Start here" open={count === 1} handleTriggerClick={() => setCount(1)}>
<p>
This is the collapsible content. It can be any element or
React component you like.
</p>
<p>
It can even be another Collapsible component. Check out the
next section!
</p>
</Collapsible>
<Collapsible trigger="Start here" open={count === 2} handleTriggerClick={() => setCount(2)}>
<p>
This is the collapsible content. It can be any element or
React component you like.
</p>
<p>
It can even be another Collapsible component. Check out the
next section!
</p>
</Collapsible>
</>
);
}
export default App;