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)
}

我不太确定这是怎么回事，因为通过调试器进行检查可以清楚地在true和false之间更改状态值折叠1的值，但是它拒绝打开折叠。任何帮助将不胜感激。

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

Answer 1

所以我的困难是我无法导入正确的引导程序。这是一个reactstrap组件，而不是react-bootstrap组件。

React＆Bootstrap 4崩溃

1 个答案: