Reactjs 在这种情况下，如何让react bootstrap Navbar汉堡起作用

我学习了React和JavaScript，并遇到了使用React引导的方法。它在react引导

导航栏中有一个汉堡包图像作为下拉菜单

如关闭菜单所示：


这是一个开放的汉堡包菜单：


当我在我的VSCode中尝试代码时，我不能得到任何汉堡，甚至不能得到下拉式风格。我看不出汉堡包图像来自何方，也许它内置于react bootstrap中？

我得到的只是：


这是我的密码：

import React from 'react';
import { connect } from 'react-redux';
import { Navbar, Nav, Form, FormControl, Button, NavDropdown, Container, Col } from 'react-bootstrap';
import logo1 from '../../assets/The first 100 weeks in pictures and more7.png';
import 'bootstrap/dist/css/bootstrap.min.css';

class NavBar extends React.Component {
    constructor() {
        super();
        this.state = { showMenu: false };
        this.handleMenuClick = this.handleMenuClick.bind(this);
    }

    handleMenuClick() {
        const { showMenu } = this.state;
        this.setState({ showMenu: !showMenu });
    }

    render() {
        const { showMenu } = this.props;
        const { articles } = this.props;

        return (
            <>
                <Navbar expand="lg" bg="dark" variant="dark" fixed="top" collapseOnSelect expand="lg">
                    <Container fluid>
                        <Col md="auto">
                            <Navbar.Brand href="#home" className="img-container">
                                <img alt="" src={logo1} />
                            </Navbar.Brand>
                        </Col>
                        <Col md="auto">
                            <Nav.Item>
                                <Form inline>
                                    <FormControl type="text" placeholder="Search Title, event, date" className="mr-sm-2" size="lg" />
                                </Form>
                            </Nav.Item>
                        </Col>
                        <Col>
                            <Nav.Item>
                                <Button variant="outline-info" size="lg">
                                    Search
                                </Button>
                            </Nav.Item>
                        </Col>
                        <Col md="auto">
                            <Button variant="primary" size="huge">
                                Articles
                            </Button>{' '}
                            <Button variant="primary" size="huge">
                                Timeline
                            </Button>{' '}
                            <Button variant="primary" size="huge">
                                About
                            </Button>{' '}
                        </Col>
                        <Col md="auto">
                            <Navbar.Toggle aria-controls="responsive-navbar-nav" />
                            <Navbar.Collapse id="responsive-navbar-nav">
                                <Nav className="mr-auto">
                                    <Nav.Link href="#features">Features</Nav.Link>
                                    <Nav.Link href="#pricing">Pricing</Nav.Link>
                                    <NavDropdown title="Dropdown" id="collasible-nav-dropdown">
                                        <NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
                                        <NavDropdown.Item href="#action/3.2">Another action</NavDropdown.Item>
                                        <NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
                                        <NavDropdown.Divider />
                                        <NavDropdown.Item href="#action/3.4">Separated link</NavDropdown.Item>
                                    </NavDropdown>
                                </Nav>
                                <Nav>
                                    <Nav.Link href="#deets">More deets</Nav.Link>
                                    <Nav.Link eventKey={2} href="#memes">
                                        Dank memes
                                    </Nav.Link>
                                </Nav>
                            </Navbar.Collapse>
                        </Col>
                    </Container>
                </Navbar>
            </>
        );
    }
}

const mapStateToProps = state => {
    return { articles: state.rootReducer.remoteArticles };
};

const Aaa = connect(mapStateToProps, null)(NavBar);
export default Aaa;

从“React”导入React；
从'react redux'导入{connect}；
从“react bootstrap”导入{Navbar、Nav、Form、FormControl、Button、NavDropdown、Container、Col}；
从“../../assets/图片和more7.png”中的前100周导入logo1；
导入'bootstrap/dist/css/bootstrap.min.css'；
类NavBar扩展了React.Component{
构造函数（）{
超级（）；
this.state={showMenu:false}；
this.handleMenuClick=this.handleMenuClick.bind（this）；
}
handleMenuClick（）{
const{showMenu}=this.state；
this.setState（{showMenu:！showMenu}）；
}
render（）{
const{showMenu}=this.props；
const{articles}=this.props；
返回(
搜寻
文章
{' '}
时间线
{' '}
关于
{' '}
特征
定价
行动
另一个动作
某物
分离环
更多的鹿
潮湿的模因
);
}
}
常量mapStateToProps=状态=>{
返回{articles:state.rootReducer.remoteArticles}；
};
常量Aaa=连接（mapStateToProps，null）（导航栏）；
出口违约Aaa；
如果您希望汉堡包布局（移动布局）甚至显示在桌面上，您可以将
false
指定给
expand
prop

<Navbar expand={false} bg="dark" variant="dark" fixed="top" collapseOnSelect>

如果您希望汉堡的布局甚至显示在桌面上，您可以将
false
分配给
expand
属性，即
expand={false}
。至于字体问题，可能有一些css正在覆盖它-检查开发工具。如果下拉菜单不起作用，请检查控制台是否存在可能妨碍执行的错误scripts@95faf8e76605e973谢谢，我想要的是这种类型的。它也是引导，但不适用于ReactJs。您认为将代码传输到ReactJs组件
渲染
很难吗？
nav .navbar-collapse {
  position: fixed;
  top: 56px;
  background: #343a40;
  right: -100%; /* pull the menu out of the viewport from right */
  width: 100vw;
  height: 100vh;
  display: block;
  transition: right 0.3s ease; /* transition for smooth sliding */
}

nav .navbar-collapse.show {
  right: 0; /* push the menu back to viewport */
}