如何实现accordion手风琴组件第二次点击时自动关闭的功能

问题根因 #

当前代码的点击逻辑仅会将激活项固定设置为当前点击的tab索引，当二次点击已激活的tab时，activeTab的值不会发生任何变化，因此不会触发收起逻辑。

修复方案 #

修改Tab组件的onClick事件逻辑：如果当前点击的tab已经是激活状态，则将activeTab设置为非有效值（比如-1，适配tab索引从0开始的常规场景）触发收起，否则设置为当前点击的tab索引触发展开。

修改后核心代码 #

const [activeTab, setActiveTab] = React.useState(props.tabIndex);

const tabs = props.tabs.map((tab) => {
    return (
        <>
            <TabContainer>
                <Tab
                    key={tab.index}
                    onClick={() => setActiveTab(activeTab === tab.index ? -1 : tab.index)}
                    className={typeof tab.content === 'string' ? '' : 'unactive-tab'}
                >
                    {tab.name}
                </Tab>
            </TabContainer>
            {tab.index === activeTab ?
                <div
                    id="content"
                    style={{ width: '100%', margin: '2rem 0' }}
                    dangerouslySetInnerHTML={{ __html: tab.content as string }}
                />
                : null}
        </>
    );
});

可选适配说明 #

如果你的tab索引存在负数场景，可以将非激活标识替换为null等其他不会和现有tab索引重复的值，对应初始化useState时如果需要默认全收起，也可以传入对应非激活值。

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