为什么我的reactstrap Collapse无法响应初始状态与状态变更？

问题根因 #

你遇到的Collapse不生效的问题，绝大多数情况是没有引入reactstrap依赖的Bootstrap样式文件导致的。reactstrap本身只封装了Bootstrap组件的交互逻辑，所有样式都依赖Bootstrap的原生CSS，Collapse的显示/隐藏、过渡效果完全靠Bootstrap自带的.collapse、.show、.collapsing类控制，没有引入对应样式的情况下，就算isOpen的状态正确变化，界面也不会有任何视觉变化。

其次你代码里还有两个可以优化的点，也可能间接导致状态更新异常：

• 你在showInvoices、showOrders方法里分开调用了两次setState，虽然React会自动合并异步更新，但是建议合并成一次调用，避免不必要的重复渲染。
• 你当前所有订单共用同一个isOpen状态控制支付弹窗，点击任意一个订单的支付按钮都会触发所有订单的弹窗渲染，后续可能会出现弹窗重叠的问题。

解决步骤 #

1. 首先在项目的入口文件（通常是index.js）或者全局样式文件头部引入Bootstrap 5的CSS，reactstrap 9.x对应的是Bootstrap 5版本，不要引入错版本：

import 'bootstrap/dist/css/bootstrap.min.css';

如果不想引入全局Bootstrap样式污染现有代码，也可以手动添加Collapse需要的核心样式：

.collapse {
  display: none;
}
.collapse.show {
  display: block;
}
.collapsing {
  height: 0;
  overflow: hidden;
  transition: height 0.35s ease;
}

2. 优化状态更新逻辑，把两次setState合并为一次：

showInvoices() {
  console.log("Show Invoices Clicked")
  this.setState({ viewInvoices: true, viewOrders: false });
}

showOrders() {
  console.log("Show Orders Clicked")
  this.setState({ viewInvoices: false, viewOrders: true });
}

3. （可选）修复支付弹窗的共用状态问题，把全局的isOpen改成存储当前选中的订单ID，渲染弹窗时判断是否匹配：

// 构造函数里的state修改为
this.state = {
  // 其他原有状态不变
  activePayOrderId: null
}

// handleClick修改为
let handleClick = (orderId) => {
  console.log("Clicked")
  this.setState({ activePayOrderId: orderId });
}        

// onRequestClose修改为
let onRequestClose = () => {
  this.setState({ activePayOrderId: null });
}

// 渲染按钮和弹窗的地方修改为
<td><Button className="BtnPay" onClick={() => handleClick(order.sopnumbe)}>Pay</Button></td>
{this.state.activePayOrderId === order.sopnumbe ? <PaymentModal invoice={order} onRequestClose={onRequestClose} /> : null}                                

额外说明 #

不需要在componentDidUpdate里添加任何额外逻辑，reactstrap的Collapse组件会自动响应isOpen属性的状态变化，只要样式引入正确、状态更新正常，就会自动切换展开/折叠状态。

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