React手风琴点击其他项时保持已展开项打开的实现方案

实现思路 #

你当前的手风琴是单选模式，因为用单个数值类型的activeTab存储唯一激活项的索引，每次切换都会覆盖之前的值，自然会自动收起其他项。要改成可多选的展开模式，只需要把存储激活项的状态改成数组类型，存储所有已展开项的索引即可。

修改后的完整代码 #

// 1. 状态改为数组类型，存储所有已展开的tab索引
const [activeTabs, setActiveTabs] = React.useState(
  props.tabIndex !== undefined ? [props.tabIndex] : []
);

const tabs = props.tabs.map((tab) => {
    return (
        <>
            <TabContainer>
                <Tab
                    key={tab.index}
                    onClick={() => {
                      setActiveTabs(prev => {
                        // 2. 点击时判断当前tab是否已展开，已展开就移除，未展开就加入数组
                        if (prev.includes(tab.index)) {
                          return prev.filter(id => id !== tab.index)
                        } else {
                          return [...prev, tab.index]
                        }
                      })
                    }}
                    className={typeof tab.content === 'string' ? '' : 'unactive-tab'}
                >
                    {tab.name}
                </Tab>
            </TabContainer>
            {/* 3. 判断当前tab索引是否在激活数组中，存在就渲染内容 */}
            {activeTabs.includes(tab.index) ?
                <div
                    style={{ width: '100%', margin: '2rem 0' }}
                    dangerouslySetInnerHTML={{ __html: tab.content as string }}
                />
                : null}
        </>
    );
});

关键修改点说明 #

• 修正了原代码中activTab的拼写错误（少了字符e，应为activeTab）
• 移除了原代码中多个tab会重复生成相同id="content"的问题，避免HTML id冲突
• 状态修改为数组后，所有已展开的项索引都会被保留，不会因为新增展开项就覆盖之前的状态

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