React Collapsible组件实现单开手风琴功能的技术求助

要让react-collapsible组件实现「点击新项自动关闭已打开项」的单开手风琴效果，核心是在父组件中统一管理打开状态，具体修改如下：

1. 修改子组件（Accordion） #

添加onTriggerClick属性，将点击事件透传给底层的Collapsible组件：

import Collapsible from 'react-collapsible';

const Accordion = ({
  open,
  trigger,
  triggerWhenOpen,
  children,
  onTriggerClick
}) => {
  return (
    <Collapsible
      open={open}
      lazyRender={true}
      triggerTagName="div"
      trigger={trigger}
      triggerWhenOpen={triggerWhenOpen}
      className="mb-[30px]"
      onTriggerClick={onTriggerClick}
    >
      {children}
    </Collapsible>
  );
};

export default Accordion;

2. 修改父组件 #

在父组件中维护当前打开项的状态，控制每个手风琴的开闭：

import { useState } from 'react';
import Accordion from './Accordion';
import AccordionContent from './AccordionContent';

// 父组件内部逻辑
const [activeAccordionId, setActiveAccordionId] = useState(null);

// 处理手风琴点击事件
const handleAccordionToggle = (itemId) => {
  // 点击已打开的项则关闭，否则打开该项并关闭其他
  setActiveAccordionId(prevId => prevId === itemId ? null : itemId);
};

// 渲染手风琴列表
{accordionArray.map((accItem) => (
  <Accordion
    open={activeAccordionId === accItem.id}
    trigger={accItem.trigger}
    triggerWhenOpen={accItem.triggerWhenOpen}
    key={accItem.id} // 用项的唯一ID作为key，避免Math.random()导致的渲染问题
    onTriggerClick={() => handleAccordionToggle(accItem.id)}
  >
    <AccordionContent
      imgSrc={'/' + accItem.imgSrc}
      imgAlt={accItem.imgAlt}
    />
  </Accordion>
))}

关键说明 #

• 确保accordionArray中的每个项拥有唯一id字段，如果没有可以手动添加（比如{id: 1, ...}），不要用索引或随机数作为key
• activeAccordionId状态记录当前打开项的ID，通过对比这个ID来控制每个Accordion的open属性，实现单开效果
• 点击已打开的项时会自动关闭，若不需要这个功能，可将handleAccordionToggle改为setActiveAccordionId(itemId)

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