小编sha*_*acy的帖子

我的页面上有两列。我想创建一个固定在左侧的侧边栏，因此如果滚动主体中包含的内容，则侧边栏不应滚动。在较小的屏幕中，侧边栏应该是可折叠的。

在研究了各种来源之后，似乎我需要使用jquery，但我想尽可能地最大化ReactJs的功能。此外，一些消息来源还表示，将 Jquery 与 ReactJs 混合使用并不是一个好主意。

侧边栏现已修复，但我现在的问题是我似乎无法在较小的屏幕上折叠它。它只是固定在那里，并在较小的屏幕中消失。我的目标是在较小的屏幕中创建一个按钮，单击该按钮时应显示侧边栏

这不是我的全部代码。我只是发布相关片段：

[.js]

constructor(props) {
        this.state = {
            collapsed: true
        };
        this.toggleNavbar = this.toggleNavbar.bind(this);
}
toggleNavbar() {
        this.setState({
            collapsed: !this.state.collapsed
        });
}
render() {
        return (
            <div  id="sidebar" >
                <Navbar color="faded" light className="sticky-top" data-spy="affix">
                    <NavbarToggler onClick={this.toggleNavbar} className="main-toggler"/>
                    <Collapse isOpen={this.state.collapsed} navbar>
                        <Nav navbar>
                            <Container>
                                <div>
                                    <NavbarBrand>Theories</NavbarBrand>
                                    <NavbarToggler onClick={this.toggleTheories} />
                                    <Collapse isOpen={!this.state.theoriesCollapsed} navbar>
                                        <NavItem>
                                        </NavItem>
                                    </Collapse>
                                </div>
                            </Container>
                        </Nav>
                    </Collapse>
                </Navbar>
            </div>
        );
    }

[.css]

@media screen and (max-width: 768px)) {
    .main-toggler {
        display: block;
    } …