React Accessible Accordion使用异常排查：点击后全部折叠问题

当前代码的问题在于Accordion组件默认是手风琴模式（同一时间仅能展开一个面板），所以点击任意面板时，所有其他面板会自动关闭。要实现点击单个面板仅切换自身状态、其余面板保持展开的效果，需要启用多面板同时展开模式。

修复方案 #

给Accordion组件添加allowMultipleExpanded属性，该属性允许多个面板同时处于展开状态，点击面板时只会切换自身的展开/收起状态，不会影响其他面板。

修正后的代码 #

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 Apdemo() {
    return (
        <Accordion preExpanded={['a', 'b', 'c']} allowMultipleExpanded>
            <AccordionItem uuid="a">
                <AccordionItemHeading>
                    <AccordionItemButton>
                        What harsh truths do you prefer to ignore?
                    </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 uuid="b">
                <AccordionItemHeading>
                    <AccordionItemButton>
                        Is free will real or just an illusion?
                    </AccordionItemButton>
                </AccordionItemHeading>
                <AccordionItemPanel>
                    <p>
                        In ad velit in ex nostrud dolore cupidatat consectetur
                        ea in ut nostrud velit in irure cillum tempor laboris
                        sed adipisicing eu esse duis nulla non.
                    </p>
                </AccordionItemPanel>
            </AccordionItem>
            <AccordionItem uuid="c">
                <AccordionItemHeading>
                    <AccordionItemButton>
                        Is free will real or just an illusion?
                    </AccordionItemButton>
                </AccordionItemHeading>
                <AccordionItemPanel>
                    <p>
                        In ad velit in ex nostrud dolore cupidatat consectetur
                        ea in ut nostrud velit in irure cillum tempor laboris
                        sed adipisicing eu esse duis nulla non.
                    </p>
                </AccordionItemPanel>
            </AccordionItem>
        </Accordion>
    );
}

补充说明 #

• allowMultipleExpanded：启用后，多个面板可同时展开，点击面板仅切换自身状态。
• 若需要允许所有面板都处于收起状态，可额外添加allowZeroExpanded属性（默认情况下至少有一个面板展开）。

内容的提问来源于stack exchange，提问作者Siva MCA