React Collapsible - 一次打开一个手风琴答案

【问题标题】：React Collapsible - Open One Accordion at timeReact Collapsible - 一次打开一个手风琴
【发布时间】：2022-12-18 13:26:24
【问题描述】：

我正在使用 React 的 Collapsible 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>
              ))}

【问题讨论】：

您是否有 accName.open 属性，它是布尔值并存储它是否打开？
@Bhumit070 是的，我有它，但它是 Collapsible 包的内置属性。对于第一个手风琴它是真的，对于其余的它是假的，所以当用户第一次打开页面时，第一个手风琴默认打开。
这回答了你的问题了吗？ How can Reactstrap collapse open only one item?
我可以把你的代码放在codesandbox里吗？修复它会更容易。 codesandbox.io/s/del-y8gj0m

标签： reactjs accordion

【解决方案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;

【讨论】：