反应 & Bootstrap 4

Question

我正在导入：

import Collapse from "react-bootstrap/es/Collapse";

所以我试图让我的崩溃在我的项目中工作这里来自渲染：

<div className="card-header" >
    <a className="card-link" href='#compSci' onClick={this.toggleCollapse}>
        Computer Sciences
    </a>
</div>
<Collapse id="collapse1" isOpen = {this.state.collapse1}>
    <div className="card-body">
        <div className="row">
            {
                computerScience.map(skill => (
                    <div className="col">
                        <SkillPopover skill={skill} />
                    </div>
                ))
            }
        </div>
    </div>
</Collapse>

具有切换折叠功能，可将值从 true 更改为 false

toggleCollapse = () => {
        this.setState({ collapse1: !this.state.collapse1 });
        console.log(this.state.collapse1)
}

我不太确定这是怎么回事，因为使用调试器检查它清楚地更改了状态值 collapse 1 的值，介于 true 和 false 之间，但它拒绝打开 Collapse。任何帮助将不胜感激。

编辑我在这里遵循指南：https://reactstrap.github.io/components/collapse/

Answer 1

所以我的困难是我未能导入正确的 bootstrap。这是一个 reactstrap 组件，而不是 react-bootstrap 组件。

反应 & Bootstrap 4

React & Bootstrap 4 Collapse

reactjs

bootstrap-4

reactstrap