React Bootstrap 0.34.2可折叠面板初始显示及切换异常求助

架构老林

2026-8-8

解决方案

在react-bootstrap 0.34.2中，要实现Panel默认折叠、点击标题正常切换的效果，需要调整以下关键点：

1. 设置Panel初始折叠状态

默认情况下Panel组件的内容是展开的，给每个Panel添加defaultExpanded={false}属性，即可强制初始状态为折叠。

2. 修复点击两次才生效的问题

初始状态与组件内部状态不同步是导致点击两次才生效的核心原因，添加defaultExpanded={false}后，组件初始状态会和操作预期对齐，点击一次就能正常切换折叠状态。

修改后的完整代码

<PanelGroup id={'log'} className={style.panelgroup}>
  {data.map((exception, index1) => {
    return (
      <div key={index1}>
        <Panel 
          eventKey={index1} 
          key={index1} 
          defaultExpanded={false} {/* 添加该属性设置初始折叠 */}
        >
          <Panel.Heading>
            <Panel.Title toggle>
              <div className={style.header}>
                <div className={style.key}>{exception.time}</div> {/* 修正原代码中未定义的e.time */}
                <div className={style.value}>{exception.stack}</div>
              </div>
            </Panel.Title>
          </Panel.Heading>
          <Panel.Body collapsible> {/* 修正为小写的collapsible，匹配组件属性规范 */}
            <div className={style['logItem-body']}>
              {exception.stack.map((traceString, index2) => {
                return <div key={index2}>{traceString}</div>;
              })}
            </div>
          </Panel.Body>
        </Panel>
      </div>
    );
  })}
</PanelGroup>